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

Question

just few month ago started learning programming. At the moment studying JS and want to make dropable droplist. Created few droplists and occur with the problem, what all dropdown lists opening after click. Need to be opened only one which was clicked:

<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>

And write simple JS vanilla code:

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')
    };
  });
}

Can somebody tell me where i made a mistake?

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

Thanks for helping me, want to ask extra question: Also, maybe could you suggest solution if for example click is made outside the div, what condition i should write in the code?

Answer 1

You are doing toggle to all the containers... you should toggle only the one that corresponds to clicked element... so in you javascript you should take care of that, if you change your javascript for:

    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');
      });
    }

As you can see, first get parent of clicked element that has class droplist__selected , then toggle list of parent container... and that's all.

Edit 1

Maybe this is more complicated... you have to:

1. Add event to document click to close all.
2. On an item click close all but clicked one.
3. Toggle clicked item.

So:

    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');
      });
    }

Hope it helps!!!

Answer 2

Change your javascript code to

Step 1: toggle the display clicked element, if already in shown state then hide and vice-versa

Step 2: for all the other element except the clicked item - remove the class to hide them

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');
      } 
  });
}