jquery - .fadeToggle() 使我的子列表无法访问

Question

我在列表中嵌套列表，并且当用户单击相应的主题时我尝试切换子列表。然而，发生的情况是，用户可以单击子列表上的任意位置来关闭子列表，这将使链接无法访问。 (我知道现在子列表中没有链接)。 你能帮我解决这个问题吗？

$(document).ready(function() {
  $("#list li").click(function() {
    $(this).find("ul").fadeToggle();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
  <ul id="list">
    <li>
      TOPIC I
      <ul class="inner-lists">
        <li>1</li>
        <li>2</li>
        <li>3</li>
      </ul>
    </li>
  </ul>
  <div id="display"></div>
</div>

Answer 1

这比尝试停止传播效果更好(请参阅下一个片段以获取解释):

$(document).ready(function() {
  $("#list span").click(function(e) {
    $(this).next("ul").fadeToggle();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
  <ul id="list">
    <li>
      <span>TOPIC I</span>
      <ul class="inner-lists">
        <li>1</li>
        <li>2</li>
        <li>3</li>
      </ul>
    </li>
  </ul>
  <div id="display"></div>
</div>

在您的代码中，您需要停止传播，但这并没有阻止子 LI 之间的点击关闭。尝试单击此处子列表中的第 1 行和第 2 行之间，看看我的意思

$(document).ready(function() {
  $("#list li").click(function(e) {
    e.stopPropagation();
    $(this).find("ul").fadeToggle();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
  <ul id="list">
    <li>
      TOPIC I
      <ul class="inner-lists">
        <li>1</li>
        <li>2</li>
        <li>3</li>
      </ul>
    </li>
  </ul>
  <div id="display"></div>
</div>