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

Question

我有上面的代码，理想情况下可以滑动切换 ulContainer 但它无法按预期工作。我希望这样当我单击上面的选择器时，它一次只会切换一个 ul#dropdown-download-links li > a 。目前，显然它会在点击时切换所有这些。

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

我希望这是有道理的，我觉得这是一个非常常见的问题，很难解释。

Answer 1

该事件绑定(bind)在“a”元素上，要获取并切换子项，您首先需要使用返回“li”元素的“parent()”方法上一层。之后使用 find 方法获取子列表项。

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