ForEach событие выпадающего меню JavaScript

Question

Довольно простая вещь, но я все еще имею проблему и не могу найти правильный ответ. У меня есть три выпадающих меню, и я хочу использовать их с одним событием. Дело в том, что когда я щелкаю одно меню (list_arrow), все опции (list_panel) отображаются одновременно.

list_panel получил отображение: нет в CSS

HTML

                <div class="drop_down_list">
                    <span class="list_label">Menu1</span>
                    <span class="list_arrow"></span>
                    <ul class="list_panel">
                        <li>List1</li>
                        <li>List1</li>
                        <li>List1</li>
                    </ul>
                </div>
                <div class="drop_down_list">
                    <span class="list_label">Menu2</span>
                    <span class="list_arrow"></span>
                    <ul class="list_panel">
                        <li>List2</li>
                        <li>List2</li>
                        <li>List2</li>
                    </ul>
                </div>
                <div class="drop_down_list">
                    <span class="list_label">Menu3</span>
                    <span class="list_arrow"></span>
                    <ul class="list_panel">
                        <li>List3</li>
                        <li>List3</li>
                    </ul>
                </div>

JavaScript

list_arrow.forEach(function (target) {
    target.addEventListener('click', function () {
        for(var i = 0; i < list_panel.length ; i++){
            list_panel[i].style.display = 'block';
        }
    });
});

Проблема в том, что я сделал петлю, но не могу найти правильный путь. Заранее спасибо!

Answer 1

в вашем коде

for(var i = 0; i < list_panel.length ; i++){
    list_panel[i].style.display = 'block';
}

list_panel, вероятно, содержит все элементы list_panel в вашем документе. Вы должны только выбрать дочерние элементы текущего drop_down_list. Поэтому попробуйте что-то вроде

function findChildByClass(e, clName){
    return e.childNodes.forEach(child){
        if(child.className==clName){
            return child;
        }
    }
}

drop_down_lists = document.getElementsByClassName("drop_down_list");

drop_down_lists.forEach( function(drop_down_list){
    var arrow = findChildByClass(drop_down_list,"list_arrow");
    var panel = findChildByClass(drop_down_list,"list_panel");
    if(!arrow || !panel) {
        console.log("Cannot find list_arrow or list_panel");
        return;
    }
    arrow.addEventListener('click', function () {
        panel.forEach(function(p){
            p.style.display = 'block';
        });
    });
});

Answer 2

Спасибо за вашу помощь, ребята.К сожалению, я не смог использовать его в своем коде (возможно, ошибки новичка).Я просто включил ECMAScript6 и использовал let вместо var в моем цикле.Теперь работает как шарм.

Код теперь выглядит так

for (let i = 0; i < list_arrow.length; i++) {
    list_arrow[i].addEventListener('click', function () {
            list_panel[i].style.display = "block"
    });
}

Answer 3

Надеюсь, это поможет вам

var toggleVisible = function(item){
    if (item.style.display === 'none'){
        return item.style.display = 'block';
    }else{
        return item.style.display = 'none';
    }
};

function menuHandler(index, str) {
  var panels = document.getElementsByClassName("list_panel");
  if (index == -1) {
    for (var i = 0; i < panels.length; i++) {
      for (var j = 0; j < panels[i].children.length; j++) {
        toggleVisible(panels[i].children[j]); //.style.display = str;
      }
    }
  } else {
    for (var j = 0; j < panels[index].children.length; j++) {
      toggleVisible(panels[index].children[j]) //.style.display = str;
    }
  }
}

var list_label = document.getElementsByClassName("list_label");

for (var i = 0; i < list_label.length; i++) {
  (function(index) {
    list_label[index].addEventListener('click', function(itm) {
      menuHandler(index, 'block');
    });
  })(i);

}

menuHandler(-1, 'none');

<div class="drop_down_list">
  <span class="list_label">Menu1</span>
  <span class="list_arrow"></span>
  <ul class="list_panel">
    <li>List1</li>
    <li>List1</li>
    <li>List1</li>
  </ul>
</div>
<div class="drop_down_list">
  <span class="list_label">Menu2</span>
  <span class="list_arrow"></span>
  <ul class="list_panel">
    <li>List2</li>
    <li>List2</li>
    <li>List2</li>
  </ul>
</div>
<div class="drop_down_list">
  <span class="list_label">Menu3</span>
  <span class="list_arrow"></span>
  <ul class="list_panel">
    <li>List3</li>
    <li>List3</li>
  </ul>
</div>