jQuery实现向下滑出的二级菜单效果实例

<a href="#">运动鞋</a>
<a href="#">运动服</a>
<a href="#">运动用品</a>
<a href="#">户外</a>
</p>
</li>
</ul>
</div>
<div class="cont" style="display:none;">3<br />3</div>
<div class="cont" style="display:none;">4<br />3<br />4</div>
<div class="cont" style="display:none;">5</div>
<div class="cont" style="display:none;">6<br />3<br />3</div>
<div class="cont" style="display:none;">7<br />3<br />3<br />3</div>
</div>
</div>
</div>
<script type="text/javascript">
(function(){
var time = null;
var list = $("#navlist");
var box = $("#navbox");
var lista = list.find("a");
for(var i=0,j=lista.length;i<j;i++){
if(lista[i].className == "now"){
var olda = i;
}
}
var box_show = function(hei){
box.stop().animate({
height:hei,
opacity:1
},400);
}
var box_hide = function(){
box.stop().animate({
height:0,
opacity:0
},400);
}
lista.hover(function(){
lista.removeClass("now");
$(this).addClass("now");
clearTimeout(time);
var index = list.find("a").index($(this));
box.find(".cont").hide().eq(index).show();
var _height = box.find(".cont").eq(index).height()+54;
box_show(_height)
},function(){
time = setTimeout(function(){
box.find(".cont").hide();
box_hide();
},50);
lista.removeClass("now");
lista.eq(olda).addClass("now");
});
box.find(".cont").hover(function(){
var _index = box.find(".cont").index($(this));
lista.removeClass("now");
lista.eq(_index).addClass("now");
clearTimeout(time);
$(this).show();
var _height = $(this).height()+54;
box_show(_height);
},function(){
time = setTimeout(function(){
$(this).hide();
box_hide();
},50);
lista.removeClass("now");
lista.eq(olda).addClass("now");
});
})();
</script>
</body>
</html>

希望本文所述对大家的jquery程序设计有所帮助。