I've coded a vertical menu in which the sub-items
are shown when the mouse is hovered on the parent. The HTML structure is:
<ul id="nav">
<li><a href="#">Continents</a>
<ul>
<li><a href="#">Europe</a>
<ul>
<li><a href="#">A</a></li>
<li><a href="#">B</a></li>
<li><a href="#">C</a></li>
</ul>
</li>
<li><a href="#">Asia</a>
<ul>
<li><a href="#">A</a></li>
<li><a href="#">B</a></li>
<li><a href="#">C</a></li>
</ul>
</li>
<li><a href="#">Africa</a>
<ul>
<li><a href="#">A</a></li>
<li><a href="#">B</a></li>
<li><a href="#">C</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Places</a>
<ul>
<li><a href="#">Place1</a></li>
<li><a href="#">Place2</a></li>
</ul>
</li>
<li><a href="#">Oceans</a>
<ul>
<li><a href="#">Pacific</a></li>
<li><a href="#">Atlantic</a></li>
</ul>
</li>
</ul>
Initially only nav li
elements are shown. But when a user hovers on the nav li a
, the successive child elements are shown. I succeeded in doing this when there was only one ul
under the initial li
elements. But [as you'll see in my HTML structure above], I require a 2nd nested ul
in the 1st li
branch.
My javascript code is:
<script type="text/javascript">
$(document).ready(function () {
$('#nav > li > a').hover(function(){
if ($(this).attr('class') != 'active'){
$('#nav li ul').slideUp();
$(this).next().slideToggle();
$('#nav li a').removeClass('active');
$(this).addClass('active');
}
});
});
</script>
Do you rquire this kind of output: http://jsfiddle.net/uNKvu/
$('#nav li').hover(function () {
$('> ul',this).slideToggle();
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.