菜鸟笔记

Menu

非常简洁的jquery折叠菜单代码

html代码
<ul class="jq">    <li><a href="#">导航一</a></li>    <div class="box">        <li><a href="#">菜单一</a></li>        <li><a href="#">菜单二</a></li>        <li><a href="#">菜单三</a></li>    </div>    <li><a href="#">导航二</a></li>    <div class="box">        <li><a href="#">菜单一</a></li>        <li><a href="#">菜单二</a></li>        <li><a href="#">菜单三</a></li>    </div>    <li><a href="#">导航三</a></li></ul>
js代码
<script src="http://code.jquery.com/jquery-1.9.0.js"></script>$(document).ready(function(){    $(".jq>li").eq(0).addClass("on");//初始化第一个菜单    $(".jq>li").next("div.box").eq(0).show();//初始化第一个菜单    $(".jq>li").mouseover(function()    {        $(this).addClass("on").next("div.box").slideDown(300).siblings("div.box").slideUp("slow");        $(this).siblings().removeClass("on");    });});
说实话mouseover这个我不是很常用。看来有时间还是要多多看看手册!

— 于 共写了114个字
— 文内使用到的标签:

发表评论

电子邮件地址不会被公开。 必填项已用*标注