jQuery中,选中一级菜单,二级菜单自动出现的js代码

其实这个不难。

 <div id="nav">
        <ul>
            <li>
                <div class="first">账号管理div>
                <ul class="second">
                    <li>账号注册li>
                    <li>找回密码li>
                    <li>账户关联登录li>
                    <li>账号常见问题li>
                ul>
            li>
             <li>
                <div class="first">购物指南div>
                <ul class="second">
                    <li>购物指南1li>
                    <li>购物指南2li>
                    <li>购物指南3li>
                    <li>购物指南4li>
                ul>
            li>

              <li>
                <div class="first">配送方式div>
                <ul class="second">
                    <li>配送方式1li>
                    <li>配送方式2li>
                    <li>配送方式3li>
                    <li>配送方式4li>
                ul>
            li>
             <li>
                <div class="first">支付方式div>
                <ul class="second">
                    <li>支付方式1li>
                    <li>支付方式2li>
                    <li>支付方式3li>
                    <li>支付方式4li>
                ul>
            li>


        ul>
    div>

样式:

/*nav*/
#nav{
    position:absolute;
    top:366px;
    left:26px;
}
#nav ul{
    list-style:none;
} 
#nav ul li{
     display:block;
     width:196px; 
     line-height:30px;
     border-bottom:1px solid #999;
}
#nav ul li div.first{
    text-indent:20px;
    border-bottom:1px solid #999;
}
#nav ul.second{
    display:none;
}

#nav ul.second li{
     display:block;
     width:166px;
     padding-left:30px;
     height:30px;
     line-height:30px;
     border:none;
}

两种切换方式:

  //    $("#nav ul li ").hover(function(){
//          $(".second").eq($(this).index()).show();
//          //$(".second").hide().eq($(this).index()).show();
//          $(".second").hide().eq($(this).index()).show();
//          
//      })
        $(".first").hover(function(){  
            $(this).next().stop(true,true).show(1000).parent().siblings().find("ul").hide();               
            },function(){
            $(this).next().hide(1000);

        });

当然也可以将hover换成mouseout,或者toggle。好了就这样。

你可能感兴趣的:(jQuery,jquery)