如何防止 jQuery click 事件同时在多个元素上触发？

Question

I have the above code which ideally will slide toggle the ulContainer but it doesn't work as expected. I would like it so when I click on the selector above, it only toggles one of the ul#dropdown-download-links li > a one click at a time. Currently, obviously it toggles them all on click.

 $(document).ready(function() { $("ul#dropdown-download-links li > a").unbind().click(function(e) { var ulContainer = $(this).closest("li"); e.preventDefault(); $(ulContainer).slideToggle(); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul id="dropdown-download-links"> <li><a href="#">Test</a> <ul> <li><a href="#">Toggle on click etc</a></li> </ul> </li> <li><a href="#">Test</a> <ul> <li><a href="#">But don't toggle on click of first one</a></li> </ul> </li> </ul>

I hope that makes sense, I feel like it's a super common probelm it's just hard to explain.

Answer 1

The event is bound on the 'a' element, to get and toggle the child items, you first need to go up one level with the 'parent()' method which returns the 'li' element. After that use the find method to get the child list items.

 $(document).ready(function(){ $("ul#dropdown-download-links li > a").unbind().click(function(e) { var ulContainer = $(this).parent().find("li"); e.preventDefault(); $(ulContainer).slideToggle(); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul id="dropdown-download-links"> <li><a href="#">Test</a> <ul> <li><a href="#">Toggle on click etc</a></li> <li><a href="#">Toggle on click etc</a></li> </ul> </li> <li><a href="#">Test</a> <ul> <li><a href="#">But don't toggle on click of first one</a></li> </ul> </li> </ul>

Answer 2

 $(document).ready(function(){ $("ul#dropdown-download-links li:first-child >a").unbind().click(function(e) { var ulContainer = $(this).closest("li"); e.preventDefault(); $(ulContainer).slideToggle(); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul id="dropdown-download-links"> <li><a href="#">Test</a> <ul> <li><a href="#">Toggle on click etc</a></li> </ul> </li> <li><a href="#">Test</a> <ul> <li><a href="#">But don't toggle on click of first one</a></li> </ul> </li> </ul>