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>购物指南1</li>
                    <li>购物指南2</li>
                    <li>购物指南3</li>
                    <li>购物指南4</li>
                </ul>
            </li>

              <li>
                <div class="first">配送方式</div>
                <ul class="second">
                    <li>配送方式1</li>
                    <li>配送方式2</li>
                    <li>配送方式3</li>
                    <li>配送方式4</li>
                </ul>
            </li>
             <li>
                <div class="first">支付方式</div>
                <ul class="second">
                    <li>支付方式1</li>
                    <li>支付方式2</li>
                    <li>支付方式3</li>
                    <li>支付方式4</li>
                </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。好了就这样。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值