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

来源：互联网发布：香水时代淘宝店正品吗编辑：程序博客网时间：2024/04/29 06:21

其实这个不难。

 <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