Question

我＆＃39;嵌套列表中的列表，我试图在用户单击相应主题时切换子列表。然而，发生的情况是用户可以单击子列表上的任何位置来关闭子列表，这将使链接不可访问。（我知道现在的子列表中没有链接）。你能帮我解决一下吗？

＆＃13;

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

＆＃13;

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

＆＃13;

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>

Answer 2

要解决此问题，您可以在点击处理程序中调用stopPropagation()。这将阻止事件将DOM冒泡到父li并淡化ul。

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

.fadeToggle（）使我的子列表无法访问

2 个答案: