jquery - 包含标签的分层或嵌套列表上的 Jquery

Answer 1

用于children("ul")仅切换ul父项的子项li。否则，您将切换父项 ，<a href="#">1.</a>它也是 的子项li：

$("li").click(function(){
    $(this).children("ul").toggle(500);
    return false;
});

演示。

Answer 2

在这里，我为上述查询完成了完整的示例箱。我们应该使用 Jquery 的事件对象方法“stopPropagation()”来停止分层事件的发生，而不是返回 false。

演示 http://codebins.com/bin/4ldqp7e

HTML

<div class="main_list">
  <ul>
    <li>
      <a href="#">
        1.
      </a>
      <ul>
        <li>
          <a href="#">
            1.1
          </a>
          <ul>
            <li>
              <a href="#">
                1.1.1
              </a>
            </li>
          </ul>
        </li>
      </ul>
      <li>
        <a href="#">
          2.
        </a>
    </li>
    <li>
      <a href="#">
        3.
      </a>
      <ul>
        <li>
          <a href="#">
            3.1
          </a>
        </li>
        <li>
          <a href="#">
            3.2
          </a>
        </li>
      </ul>
      <li>
        <a href="#">
          4.
        </a>
        <ul>
          <li>
            <a href="#">
              4.1
            </a>
            <ul>
              <li>
                <a href="#">
                  4.1.1 
                </a>
              </li>
              <li>
                <a href="#">
                  4.1.2 
                </a>
              </li>
            </ul>
          </li>
        </ul>
    </li>
  </ul>
</div>

jQuery

$(function() {
    // only show top level elements to begin
    $("ul ul").hide();

    $("li").click(function(e) {
        //need to change here...
        e.stopPropagation();
        $(this).children("ul").toggle(500);
    });
});

CSS

li{
  list-style:none;
}
ul{
  margin:5px;
  padding:2px;
}

演示 http://codebins.com/bin/4ldqp7e