单击时切换下拉菜单，使用 jquery 隐藏其他人

Question

Not sure why this does not work but I have 3 different dropdowns built, an element to click to trigger the dropdown, all is working as expected. My issue is I want to hide all the others when one is clicked, I have this working to a degree, yes they are all hiding when I click the one I want open but now when I click that same one to "close" or "toggle off" it remains open? How can I ensure the second click closes the current dropdown? much appreciated if anyone can help me out with this one

HTML:

<div class = "dropdown-input-div">Click to Trigger open this one</div>

<ul class="form-dropdown-ul opened">
    <li class=" dropdown-list-item" id="list-item-0">
        <label class="dropdown-label">0-2 years ago</label></li>
    <li class="dropdown-list-item" id="list-item-1">
        <label class="dropdown-label">3-5 years ago</label></li>
    <li class="dropdown-list-item" id="list-item-2">
        <label class=" dropdown-label">5-8 years ago</label></li>
    <li class="dropdown-list-item" id="list-item-3">
        <label class="dropdown-label">8-10 years ago</label></li>
</ul>



<div class = "dropdown-input-div">Click to Trigger open this one</div>

<ul class="form-dropdown-ul">
    <li class=" dropdown-list-item" id="list-item-4">
        <label class="dropdown-label">10-12 years ago</label></li>
    <li class="dropdown-list-item" id="list-item-5">
        <label class="dropdown-label">12-16 years ago</label></li>
    <li class="dropdown-list-item" id="list-item-6">
        <label class=" dropdown-label">16-20 years ago</label></li>
</ul>



<div class = "dropdown-input-div">Click to Trigger open this one</div>

<ul class="form-dropdown-ul">
    <li class=" dropdown-list-item" id="list-item-4">
        <label class="dropdown-label">10-12 years ago</label></li>
    <li class="dropdown-list-item" id="list-item-5">
        <label class="dropdown-label">12-16 years ago</label></li>
    <li class="dropdown-list-item" id="list-item-6">
        <label class=" dropdown-label">16-20 years ago</label></li>
</ul>

jQuery:

  $('.form-dropdown-ul').hide();

$('.dropdown-input-div').on('click',function(){
  $('.form-dropdown-ul').hide();
  $(this).next('.form-dropdown-ul').toggle();
});

Answer 1

Place $('ul').hide() before your click function to hide all the ul elements. Then when you trigger this on the elements next ul , it will only toggle that elements child. Hide all siblings of the selected elements next().siblings('ul') .

Add: $(this).next().siblings("ul").hide();

 $(document).ready(function() { $("ul").hide();//<-- initially hide the UL elements $(".dropdown-input-div").click(function() { $(this).next("ul").toggle(); //<-- toggle the next ul element of the selected DIV $(this).next().siblings("ul").hide(); //<-- hide all siblings of the selected ul }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="dropdown-input-div">Click to Trigger open this one</div> <ul class="form-dropdown-ul opened"> <li class=" dropdown-list-item" id="list-item-0"> <label class="dropdown-label">0-2 years ago</label></li> <li class="dropdown-list-item" id="list-item-1"> <label class="dropdown-label">3-5 years ago</label></li> <li class="dropdown-list-item" id="list-item-2"> <label class=" dropdown-label">5-8 years ago</label></li> <li class="dropdown-list-item" id="list-item-3"> <label class="dropdown-label">8-10 years ago</label></li> </ul> <div class="dropdown-input-div">Click to Trigger open this one</div> <ul class="form-dropdown-ul"> <li class="dropdown-list-item" id="list-item-4"> <label class="dropdown-label">10-12 years ago</label></li> <li class="dropdown-list-item" id="list-item-5"> <label class="dropdown-label">12-16 years ago</label></li> <li class="dropdown-list-item" id="list-item-6"> <label class=" dropdown-label">16-20 years ago</label></li> </ul> <div class="dropdown-input-div">Click to Trigger open this one</div> <ul class="form-dropdown-ul"> <li class=" dropdown-list-item" id="list-item-4"> <label class="dropdown-label">10-12 years ago</label></li> <li class="dropdown-list-item" id="list-item-5"> <label class="dropdown-label">12-16 years ago</label></li> <li class="dropdown-list-item" id="list-item-6"> <label class=" dropdown-label">16-20 years ago</label></li> </ul>