javascript - 多次循环访问父类以触发相应的子类

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>

java 脚本:

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 则创建一个 bool 值而不是切换类。我只是想不出轻松做到这一点的最佳做法。
感谢帮助。
谢谢

Answer 1

我申请了 toggle()方法，连同forEach()的方法.其中需要声明当前按钮的变量-元素_当前 .
接下来，.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>