副導航菜單問題

如何讓我的所有嵌套列表在單擊時摺疊和展開。副導航菜單問題

這是我的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>

來源

2010-08-18 synonyms

我不知道究竟你以後，但一般的概念是這樣的：

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

來源

2010-08-18 03:51:46

這個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/

來源

2010-08-18 03:57:18

類似於其他的想法，我把這樣的東西放在一起作爲一個粗略的草案：

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

在我的例子，我添加了類「導航」到最外部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>

來源

2010-08-18 04:05:45 brendan

我不能讓這與我的代碼工作:( – synonyms 2010-08-18 04:11:38

對 - 忘了我添加了一個類到最外面的ul - 看到我的更新:-) – brendan 2010-08-18 04:30:25

仍然無法讓它工作:( – synonyms 2010-08-18 04:32:48

副導航菜單問題

回答

相關問題