Как: Применение Toggle (Hide/Show) к нескольким (много-много) блокам?

Question

[sdgs4s4 .]

Есть html:

<button onclick="myFunction()">Click Me</button>

<div id="myDIV">
  This is my DIV element.
</div>

Есть скрипт:

function myFunction() {
    var x = document.getElementById('myDIV');
    if (x.style.display === 'none') {
        x.style.display = 'block';
    } else {
        x.style.display = 'none';
    }
}

Есть стиль:

css (жмяк)

#myDIV {
    width: 100%;
    padding: 50px 0;
    text-align: center;
    background-color: lightblue;
    margin-top:20px;
}

Если применять данный скрипт к нескольким элементам, то hide/show только первый элемент

Как сделать чтоб он понимал в каком блоке находится и соответственно для этого блока показывал выпадающее меню (и скрывался либо через время, либо при открытии другого)
делаю по аналогии как у вк:

тут картинка (жмяк)

Если тут надо писать другой скрипт, то прошу сделать рабочий вариант, сам писать не научился, шаблоны с w3schools copy/paste

Answer 1

[Алексей Шашенков]

Вот например так

Comments

[sdgs4s4 .]

подписывать id к блокам не могу, это товарки, которые выводятся через php foreach

[Алексей Шашенков]

lipatkin: Тут тогда надо чтобы был общий родитель тогда. Такое возможно?

[Алексей Шашенков]

lipatkin: Тогда надо фрагмент кода. Чтобы ясно было . Надо 2 товара.

[sdgs4s4 .]

Алексей Шашенков: вот:

код 2 товара: (жмяк)

<div class="row">
    <div class="col img">
        <!-- img -->
    </div>
    <div class="col details">
        <!-- name product -->
    </div>
    <div class="col ea-switch">
        <button onclick="myFunction()">Try it</button>
    </div>
</div>
<div class="row">
    <div class="col img">
        <!-- img -->
    </div>
    <div class="col details">
        <!-- name product -->
    </div>
    <div class="col ea-switch">
        <button onclick="myFunction()">Try it</button>
    </div>
</div>

[Алексей Шашенков]

lipatkin: А что нужно показать при клике? на button

[sdgs4s4 .]

Алексей Шашенков: кнопка была условно, вот что на деле:

Что делаем (жмяк):

<!-- кнопка-->
<div class="act_actions_menu_icons" aria-label="Действия" role="button" onclick=""><span class="blind_label">Действия</span></div>
<!-- выпадающее меню-->
<div class="act_actions_menu">
    <a href="update">редактировать</a>
    <a href="delete">удалить</a>
    <a href="views">скрыть</a>
</div>

[Алексей Шашенков]

lipatkin: А это в находится вот тут? prntscr.com/g5s7gw

[sdgs4s4 .]

<div class="row">
    <div class="col img">
        <!-- img -->
    </div>
    <div class="col details">
        <!-- name product -->
    </div>
    <div class="col ea-switch">
        <!-- кнопка-->
        <div class="act_actions_menu_icons" aria-label="Действия" role="button" onclick=""><span         class="blind_label">Действия</span></div>
        <!-- выпадающее меню-->
        <div class="act_actions_menu">
            <a href="update">редактировать</a>
            <a href="delete">удалить</a>
            <a href="views">скрыть</a>
        </div>
    </div>
</div>
<div class="row">
    <div class="col img">
        <!-- img -->
    </div>
    <div class="col details">
        <!-- name product -->
    </div>
    <div class="col ea-switch">
        <!-- кнопка-->
        <div class="act_actions_menu_icons" aria-label="Действия" role="button" onclick=""><span         class="blind_label">Действия</span></div>
        <!-- выпадающее меню-->
        <div class="act_actions_menu">
            <a href="update">редактировать</a>
            <a href="delete">удалить</a>
            <a href="views">скрыть</a>
        </div>
    </div>
</div>

и вот такие блоки множатся через foreach, тут что то подставить не получится :(

[Алексей Шашенков]

lipatkin: Отлично, есть общий родитель .row
Решение надо js или jq?

[Алексей Шашенков]

lipatkin: Вот так на js

[sdgs4s4 .]

Алексей Шашенков:

а чем будет отличаться js от jq за исключением кол-ва строк в коде скрипта?

и напишите какую нибудь там строчку, чтоб он закрывался НЕ только при нажатии на открывающую кнопку

т.е. мы открыли и можем нажать на любое другое место на сайте и он закроется

[Алексей Шашенков]

lipatkin: Вот так https://codepen.io/teknik2008/pen/ZJeabL

[sdgs4s4 .]

аааааа, блин, не заметил сразу, тут не подмена классов, тут display: block/none xD

нужна подмена, потому что дальше вытекает одно из другого, сори, не посмотрел код сразу

могу еще один вопрос задать, туда ответишь, я еще одну плюшку поставлю

[Алексей Шашенков]

lipatkin: Обновил.
Да ладно, я тут просто. Скучно было, ответил)))

[sdgs4s4 .]

Алексей Шашенков: спасибо тебе)

[sdgs4s4 .]

Алексей Шашенков: Алексей, я знаю что скажешь мол я оборзел, но нужна твоя помощь))

До последнего не хотел тебя трогать и так хорошо помог, но уже 2 или 3й час сижу и пытаюсь переписать функцию чтоб класс менялся (добавлялся) у родительского элемента, уже все перепробывал, выручай!!

[Алексей Шашенков]

lipatkin: код можно?

[sdgs4s4 .]

Алексей Шашенков:

JS

function isHidden(el){
  return  el.offsetParent===null
}

function checkParent(target,nodes){
  var ignore=[];
  var result=[];
  while(target.parentNode){
    for(var q=0;q<nodes.length;q++){
      var node=nodes[q]
      if(node==target){
        ignore.push(q);
      }
    }
    target=target.parentNode;
  }
  for(var q=0;q<nodes.length;q++){
    if(ignore.indexOf(q)>-1){
      continue};
    result.push(nodes[q])
  }
  return result
}

function showBox(e){
  var from = this.getAttribute('data-from');
  var parent=this.closest('.opened');
  var box = parent.querySelector('.unblock');
  var hidden=isHidden(box);
  if(hidden){
    setTimeout(function(){box.classList.add('_show-box','open')},1);
  }
  return false;
}


function hideBox(e){
  var target=e.target;
  var openNodes=document.getElementsByClassName('_show-box');
  var hideLis=checkParent(target,openNodes)
  for(var q=0;q<hideLis.length;q++){
    var box=hideLis[q];
    box.classList.remove('_show-box','open');
  }
}

function setAddEventListener(nodes,event,hendler){
  for(var q=0;q<nodes.length;q++){
    nodes[q].addEventListener(event,hendler);
  }
}

var nodes=document.getElementsByClassName('close'); 
document.addEventListener('click',hideBox)

setAddEventListener(nodes,'click',showBox)

html

<div class="row opened"> <!-- родительский -->
    <div class="col ea-switch">
        <div class="act_actions_menu_icons close" aria-label="Действия" role="button" onclick=""><span class="blind_label">Действия</span></div>
        <div class="act_actions_menu unblock">
            <a href="" class="ui_actions_menu_item">Редактировать</a>
            <a href="" class="ui_actions_menu_item">Удалить</a>
        </div>
    </div>
</div> 
<div class="row opened"> <!-- родительский -->
    <div class="col ea-switch">
        <div class="act_actions_menu_icons close" aria-label="Действия" role="button" onclick=""><span class="blind_label">Действия</span></div>
        <div class="act_actions_menu unblock">
            <a href="" class="ui_actions_menu_item">Редактировать</a>
            <a href="" class="ui_actions_menu_item">Удалить</a>
        </div>
    </div>
</div>