如何制作一个点击下拉的下拉列表？

Question

就在几个月前开始学习编程。 目前正在学习 JS 并想制作 dropable droplist。 创建了几个下拉列表并出现问题，点击后所有下拉列表打开。 只需要打开一个被点击的：

<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet"  type='text/css'>
<div class="main">
  <div class="droplist__box">
    <div class="droplist__selected">
      <span>Choose options</span>
      <i class="fa fa-chevron-down"></i>
    </div>
    <div class="droplist__items-container">
      <div class="droplist__item">
        <label for=""> 
          <input type="checkbox" name="" id=""> 
          <span>Option 1</span> 
        </label>
      </div>
          <div class="droplist__item">
        <label for=""> 
          <input type="checkbox" name="" id=""> 
          <span>Option 2</span> 
        </label>
      </div>
          <div class="droplist__item">
        <label for=""> 
          <input type="checkbox" name="" id=""> 
          <span>Option 3</span> 
        </label>
      </div>
          <div class="droplist__item">
        <label for=""> 
          <input type="checkbox" name="" id=""> 
          <span>Option 4</span> 
        </label>
      </div>
    </div>
  </div>

  <div class="droplist__box">
    <div class="droplist__selected">
      <span>Choose options</span>
      <i class="fa fa-chevron-down"></i>
    </div>
    <div class="droplist__items-container">
      <div class="droplist__item">
        <label for=""> 
          <input type="checkbox" name="" id=""> 
          <span>Option 1</span> 
        </label>
      </div>
          <div class="droplist__item">
        <label for=""> 
          <input type="checkbox" name="" id=""> 
          <span>Option 2</span> 
        </label>
      </div>
          <div class="droplist__item">
        <label for=""> 
          <input type="checkbox" name="" id=""> 
          <span>Option 3</span> 
        </label>
      </div>
          <div class="droplist__item">
        <label for=""> 
          <input type="checkbox" name="" id=""> 
          <span>Option 4</span> 
        </label>
      </div>
    </div>
  </div>

  <div class="droplist__box">
    <div class="droplist__selected">
      <span>Choose options</span>
      <i class="fa fa-chevron-down"></i>
    </div>
    <div class="droplist__items-container">
      <div class="droplist__item">
        <label for=""> 
          <input type="checkbox" name="" id=""> 
          <span>Option 1</span> 
        </label>
      </div>
          <div class="droplist__item">
        <label for=""> 
          <input type="checkbox" name="" id=""> 
          <span>Option 2</span> 
        </label>
      </div>
          <div class="droplist__item">
        <label for=""> 
          <input type="checkbox" name="" id=""> 
          <span>Option 3</span> 
        </label>
      </div>
          <div class="droplist__item">
        <label for=""> 
          <input type="checkbox" name="" id=""> 
          <span>Option 4</span> 
        </label>
      </div>
    </div>
  </div>
</div>

并编写简单的 JS vanilla 代码：

const droplistLabel = document.querySelectorAll('.droplist__selected');
const droplist = document.querySelectorAll('.droplist__items-container');

for (i = 0; i < droplistLabel.length; i ++){
  droplistLabel[i].addEventListener('click', () => {
    for (i = 0; i < droplist.length; i ++){
      droplist[i].classList.toggle('display')
    };
  });
}

有人能告诉我我在哪里做错了吗？

https://codepen.io/miroso/pen/dyGXOYq

感谢您帮助我，想问额外的问题：另外，如果例如在 div 之外进行单击，您能否提出解决方案，我应该在代码中写什么条件？

Answer 1

您正在切换所有容器...您应该只切换与单击的元素相对应的那个...所以在 javascript 中，如果您将 javascript 更改为：

    const droplistLabel = document.querySelectorAll('.droplist__selected');

    for (i = 0; i < droplistLabel.length; i ++){
      droplistLabel[i].addEventListener('click', (e) => {
        let parent, droplist;

        // look for droplist__selected
        parent=e.srcElement;
        while(!parent.classList.contains('droplist__selected')) {
          parent=parent.parentElement;
        }

        // get container of list and toggle
        droplist = parent.parentElement.querySelector('.droplist__items-container');
        droplist.classList.toggle('display');
      });
    }

如您所见，首先获取具有 class droplist__selected的单击元素的父元素，然后切换父容器列表...仅此而已。

编辑 1

也许这更复杂......你必须：

1. 将事件添加到文档单击以关闭所有。
2. 在一个项目上单击关闭所有但单击一个。
3. 切换单击的项目。

所以：

    const droplistLabel = document.querySelectorAll('.droplist__selected');

  document.addEventListener('click', (e) => {
        // close all...
        droplist = document.querySelectorAll('.droplist__items-container');
        for(j=0;j<droplist.length;j++) {
          droplist[j].classList.remove('display');
        }  
  });

    for (i = 0; i < droplistLabel.length; i ++){
      droplistLabel[i].addEventListener('click', (e) => {
        let parent, droplist, droplists;

        // Cancel event to avoid document.click reached... 
        e.stopPropagation();

        // look for droplist__selected
        parent=e.srcElement;
        while(!parent.classList.contains('droplist__selected')) {
          parent=parent.parentElement;
        }

        // close all but clicked, get clicked and compare with the others...
        droplist = parent.parentElement.querySelector('.droplist__items-container');

        droplists = document.querySelectorAll('.droplist__items-container');
        for(let j=0;j<droplists.length;j++) {
          if(droplists[j]!=droplist) {
            droplists[j].classList.remove('display');
          }
        }       

        // finally toggle clicked... get container of list and toggle
        droplist.classList.toggle('display');
      });
    }

希望能帮助到你！！！

Answer 2

将您的 javascript 代码更改为

第 1 步：切换显示点击的元素，如果已经显示 state 然后隐藏，反之亦然

第 2 步：对于除单击项目之外的所有其他元素 - 删除 class 以隐藏它们

const droplistLabel = document.querySelectorAll('.droplist__selected');
const droplist = document.querySelectorAll('.droplist__items-container');

for (let i = 0; i < droplistLabel.length; i ++){
  droplistLabel[i].addEventListener('click', () => {
      droplist[i].classList.toggle('display');**// toggle the display clicked element, if already in shown state then hide and vice-versa**
      for(let j=0;j<droplist.length;j++)
      {
          if(i!=j)**//for all the other element except the clicked item - remove the class to hide them**
           droplist[j].classList.remove('display');
      } 
  });
}