JS怎么写二级菜单呢？

JavaScript029

JS怎么写二级菜单呢？,第1张

鼠标移出导航二级菜单就消失是因为二级菜单没有在导航容器内，所以mouseout条件满足了，自然就消失了。

<!--一级导航-->

<ul class='menu'>

<li class='menu-lei'>

<!--二级菜单-->

<ul class='menu-sub'>

<li class='menu-sub-cnt' name='b'></li>

<li class='menu-sub-cnt' name='b'></li>

...

</ul>

</li>

<li class='menu-lei'>

<!--二级菜单-->

<ul class='menu-sub'>

<li class='menu-sub-cnt' name='b'></li>

<li class='menu-sub-cnt' name='b'></li>

...

</ul>

</li>

...

</ul>

结果改成这样就行了，这样二级菜单在导航容器内，所以不会由于mouseout条件必须满足从二级菜单移出才会执行。

$(".menu_lei").each(function(){

$(this).mouseover(function(){

$(this).find(".menu-sub").show()

})

$(this).mouseout(function(){

$(this).find(".menu-sub").hide()

})

})

楼主写了这么多汗!你都知道用toggle了~~~

我也不是很熟悉jquery。大致给你说下吧

$(function(){

$(".class").toggle(function(){

1，这个地方你把需要显示的DIV显示出来即可。

2，那个“加号”是图片的话，就换图片的url路径，是背景的话就换CSS

3,如果下面的DIV是只能一个一个显示的话，就用这个$(this).siblings(".div")

例如:

$(".one").show()

$(".image").attr("src","images/002.gif")

},function(){

此处再回到默认状态即可，很简单的。

})

})

很简单的一个效果，没必要写那么多代码。

用jquery实现吧，其实网上 有不少这种小控件！

<div class="arrowlistmenu">

<h3 class="menuheader expandable">表单</h3>

<ul class="categoryitems">

<li><a href="1/">Horizontal CSS Menus</a></li>

<li><a href="2/">Vertical CSS Menus</a></li>

<li><a href="4/">Image CSS</a></li>

<li><a href="6/">Form CSS</a></li>

</ul>

<h3 class="menuheader expandable">菜单</h3>

<ul class="categoryitems">

<li><a href="">CSS Gallery</a></li>

<li><a href="">Menu Gallery</a></li>

<li><a href="">Web Design News</a></li>

<li><a href="">CSS Examples</a></li>

<li><a href="">CSS Compressor</a></li>

<li><a href="">CSS Forums</a></li>

</ul>

<h3 class="menuheader expandable">分页</h3>

<ul class="categoryitems">

<li><a href="#" >Free JavaScripts</a></li>

</ul>

</div>