Response title
This is preview!
Jquery Tree Menu List Nested Items And Design
in Getting Started
•
9 years ago
Hi All,
Before I begin my knowledge on HTML is at most beginners level (so please be patient with me :))
I am currently designing an expandable tree menu that will be used on ie6 browsers.
I am having a few small issues I hope someone can help me with :). I want to add nested items to the menu that also expand but for the life of me I cant figure out why this is not working, have inserted one to show you guys what it does. Any ideas? Also the buttons kinda suck, any ideas where I can fine better ones?
I have a codepen showing this in action ( http://cdpn.io/hkFLC ) and the code below
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
ul {list-style-type: none}
ul li {margin-bottom: none}
.closed {background: url('http://png.park.iconlooker.com/16x16/groups/group-3/add/add_icon_2.png') no-repeat 0 0; padding-left: 1.5em}
.open {background: url('http://forums.7hob.co/juole6/buttons/collapse_tcat.gif') no-repeat 0 0;}
</style>
</head>
<body>
<ul>
<li class="closed">First item
<ul class="nested">
<li>Nested item</li>
</ul>
</li>
<li>Second item</li>
<li class="closed">Third item
<ul class="nested">
<li>Nested item</li>
<li class="closed">Test
<ul class="nested">
<li>Nested item</li>
</ul>
</li>
</li>
</ul>
<script type="text/javascript">
$(function(){
$('.nested').hide();
$('li.closed').click(function(){
$(this).children().toggle();
$(this).toggleClass('open');
})
})
</script>
</body>
</html>
1