php - 侧面导航菜单问题

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 .