Side Nav Menu Question
How can I have all my nested lists collapse and expand when clicked.
Here is my 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&开发者_运维百科gt;</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>
I'm not sure exactly what you're after, but the general concept looks like this:
$("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.
This jQuery plugin might be what you're looking for: http://docs.jquery.com/Plugins/Treeview
Your code will look something like this...
<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>
There are different styles available depending on which class you call in your parent <ul> tag, so take a look at these demos and chose the one you like best: http://view.jquery.com/trunk/plugins/treeview/demo/
Similar to other ideas, I threw together something like this as a rough draft:
$(".nav ul").hide();
$(".nav li").click(function(){
if ($(this).children("ul").length > 0) {
$(this).children("ul").toggle();
return false;
}
return true;
});
In my example I added the class "nav" to the outer most ul to avoid conflicting with other possible uls on the page:
<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>
加载中,请稍侯......
精彩评论