Question

单击时如何折叠和展开所有嵌套列表。

这是我的xHTML。

<ul>
   <li><a href="some-link.php">First Nested List</a></li>
   <li><a href="some-link.php">First Nested List</a></li>
   <li><a href="some-link.php">First Nested List</a>
      <ul>
        <li><a href="some-link.php">Second Nested List</a></li>
        <li><a href="some-link.php">Second Nested List</a></li>
        <li><a href="some-link.php">Second Nested List</a>
          <ul>
            <li><a href="some-link.php">Third Nested List</a></li>
            <li><a href="some-link.php">Third Nested List</a></li>
            <li><a href="some-link.php">Third Nested List</a>
              <ul>
                <li><a href="some-link.php">Fourth Nested List</a></li>
                <li><a href="some-link.php">Fourth Nested List</a></li>
                <li><a href="some-link.php">Fourth Nested List</a></li>
              </ul>
            </li>
            <li><a href="some-link.php">Third Nested List</a></li>
            <li><a href="some-link.php">Third Nested List</a></li>
          </ul>
        </li>
        <li><a href="some-link.php">Second Nested List</a></li>
        <li><a href="some-link.php">Second Nested List</a></li>
      </ul>
    </li>
   <li><a href="some-link.php">First Nested List</a></li>
   <li><a href="some-link.php">First Nested List</a></li>
</ul>

Answer 1

我不确定完全你所追求的是什么，但一般概念如下：

$("li").click(function(e) {
  $(this).children('ul').toggle(400); //toggle the immediate child <ul>
  return false;  //stop the click from bubbling up, and the href working
});

You can give it a try with your markup here

Answer 2

这个jQuery插件可能正是您所寻找的：http://docs.jquery.com/Plugins/Treeview

您的代码看起来像这样......

<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/treeview/demo/screen.css" type="text/css" />
  <link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/treeview/jquery.treeview.css" type="text/css" />
  <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/treeview/jquery.treeview.js"></script>
  <script>
  $(document).ready(function(){
    $("#example").treeview();
  });
  </script>

</head>
<body>
<ul id="example" class="filetree">
   <li><a href="some-link.php">First Nested List</a></li>
   <li><a href="some-link.php">First Nested List</a></li>
   <li><a href="some-link.php">First Nested List</a>
      <ul>
        <li><a href="some-link.php">Second Nested List</a></li>
        <li><a href="some-link.php">Second Nested List</a></li>
        <li><a href="some-link.php">Second Nested List</a>
          <ul>
            <li><a href="some-link.php">Third Nested List</a></li>
            <li><a href="some-link.php">Third Nested List</a></li>
            <li><a href="some-link.php">Third Nested List</a>
              <ul>
                <li><a href="some-link.php">Fourth Nested List</a></li>
                <li><a href="some-link.php">Fourth Nested List</a></li>
                <li><a href="some-link.php">Fourth Nested List</a></li>
              </ul>
            </li>
            <li><a href="some-link.php">Third Nested List</a></li>
            <li><a href="some-link.php">Third Nested List</a></li>
          </ul>
        </li>
        <li><a href="some-link.php">Second Nested List</a></li>
        <li><a href="some-link.php">Second Nested List</a></li>
      </ul>
    </li>
   <li><a href="some-link.php">First Nested List</a></li>
   <li><a href="some-link.php">First Nested List</a></li>
</ul>
</body>
</html>

根据您在父<ul>标记中调用的课程，可以使用不同的样式，因此请查看这些演示并选择您最喜欢的那个：http://view.jquery.com/trunk/plugins/treeview/demo/

Answer 3

与其他想法类似，我把这样的东西拼凑成草稿：

            $(".nav ul").hide();
            $(".nav li").click(function(){
                if ($(this).children("ul").length > 0) {
                    $(this).children("ul").toggle();
                    return false;
                }
                return true;
            });

在我的例子中，我将“nav”类添加到最外面的ul，以避免与页面上的其他可能的uls冲突：

        <ul class="nav">
   <li><a href="some-link.php">First Nested List</a></li>
   <li><a href="some-link.php">First Nested List</a></li>
   <li><a href="some-link.php">First Nested List</a>
      <ul>
        <li><a href="some-link.php">Second Nested List</a></li>
        <li><a href="some-link.php">Second Nested List</a></li>
        <li><a href="some-link.php">Second Nested List</a>
          <ul>
            <li><a href="some-link.php">Third Nested List</a></li>
            <li><a href="some-link.php">Third Nested List</a></li>
            <li><a href="some-link.php">Third Nested List</a>
              <ul>
                <li><a href="some-link.php">Fourth Nested List</a></li>
                <li><a href="some-link.php">Fourth Nested List</a></li>
                <li><a href="some-link.php">Fourth Nested List</a></li>
              </ul>
            </li>
            <li><a href="some-link.php">Third Nested List</a></li>
            <li><a href="some-link.php">Third Nested List</a></li>
          </ul>
        </li>
        <li><a href="some-link.php">Second Nested List</a></li>
        <li><a href="some-link.php">Second Nested List</a></li>
      </ul>
    </li>
   <li><a href="some-link.php">First Nested List</a></li>
   <li><a href="some-link.php">First Nested List</a></li>
</ul>

侧导航菜单问题

3 个答案: