多次循环通过父类来触发相应的子类

Question

我有一个下拉菜单，我试图在单击该下拉按钮后切换按钮的 ul 子项上的 display:block 类。当前 ul 设置为 display:none 直到单击主按钮父级。所以目前只有父级显示在屏幕上。

我很难正确设置这些循环。我可以设置它，因此当单击一个按钮时，会显示每个项目的所有 ul，但我只想要相应按钮下的那个。

HTML：

                               <div class="dropdown">
                                <div class="project">
                                 <button>website 1<i class="fas fa-caret-down"></i></button>
                                    <ul class="drop-list">
                                        <li><a href="#">Live Website</a></li>
                                        <li><a href="#">Resources</a></li>
                                    </ul>
                                </div>

                                <div class="project">
                                    <button>Website 2<i class="fas fa-caret-down"></i></button>
                                    <ul class="drop-list">
                                        <li><a href="#">Live Website</a></li>
                                        <li><a href="#">Resources</a></li>
                                    </ul>
                                </div>
                            </div>

JAVASCRIPT：

const projects = document.querySelectorAll('.project')
const dropdown_lists = document.querySelectorAll('.drop-list')


projects.forEach(button => button.addEventListener('click', function(){
    // Feel like I need a forEach loop here to loop through the dropdown_lists or a reg for loop
   // for(i=0;i<dropdown_lists.length;i++) - maybe something like this
   // then I need to classList.toggle('active') on this ul
   // I'm getting stuck on how to make this in sync with the corresponding project button
}))

CSS：

.drop-list {
    display: none;
}

.active {
   display: block;
}

---

我需要的是当单击项目[0] 时，将“活动”类从列表中切换为 dropdown_lists[0]。 当单击项目[1] 时，会将“活动”类从列表中切换为 dropdown_lists[1]。

再次，我可以设置代码，因此当我单击一个按钮时，所有 ul 下拉列表都会切换类“活动”，但我只希望第一个按钮与第一个 ul 一起使用，第二个按钮与第二个 ul 一起使用。

我只是不知道该怎么做，要么在下拉列表 === 2 和项目 === 2 时创建一个布尔值，而不是切换类。我只是想不出轻松做到这一点的最佳做法。

感谢您的帮助。

谢谢

Answer 1

我应用了toggle() 方法，以及forEach() 的方法。您需要在其中声明当前按钮的变量 - projects_current。

接下来，根据index将.active类分配给<ul class="drop-list">...</ul>：

dropdown_lists[index]

const projects = document.querySelectorAll('.project')
const dropdown_lists = document.querySelectorAll('.drop-list')

projects.forEach(function (projects_current, index) {
    projects_current.addEventListener('click', function () {
        dropdown_lists[index].classList.toggle('active');
    });
});

.drop-list {
    display: none;
}

.active {
   display: block;
}

<div class="dropdown">
   <div class="project">
      <button>website 1<i class="fas fa-caret-down"></i></button>
      <ul class="drop-list">
         <li><a href="#">Live Website</a></li>
         <li><a href="#">Resources</a></li>
      </ul>
   </div>
   <div class="project">
      <button>Website 2<i class="fas fa-caret-down"></i></button>
      <ul class="drop-list">
         <li><a href="#">Live Website</a></li>
         <li><a href="#">Resources</a></li>
      </ul>
   </div>
</div>

Answer 2

您可以使用“event delegation”来实现没有多个事件侦听器的结果。基本思想是在公共父级 (div.dropdown) 上使用单击事件侦听器来检查按钮是否被单击，如果是，则切换下一个兄弟元素的 active 类。

然后，最小的事件侦听器会像您想要实现的那样读取：

document.querySelector(".dropdown").addEventListener( "click", event => {
    if( event.target.tagName == "BUTTON") {
        event.target.nextElementSibling.classList.toggle("active");
       }
});

Answer 3

您可以在下拉列表中添加id，以便在按钮的onclick 中使用它

const toggleDropdow = (dropdown) =>
  document.getElementById(dropdown).classList.toggle("active");

.drop-list {
    display: none;
}

.active {
   display: block;
}

<div class="dropdown">
    <div class="project">
        <button onclick="toggleDropdow('dropdown1')">Website 1</button>
        <ul id="dropdown1" class="drop-list">
            <li><a href="#">Live Website</a></li>
            <li><a href="#">Resources</a></li>
        </ul>
    </div>

    <div class="project">
        <button onclick="toggleDropdow('dropdown2')">Website 2</button>
        <ul id="dropdown2" class="drop-list">
            <li><a href="#">Live Website</a></li>
            <li><a href="#">Resources</a></li>
        </ul>
    </div>
</div>