当前二级菜单项展开时，其余导航项关闭

最新推荐文章于 2022-11-02 13:03:24 发布

smile54533

最新推荐文章于 2022-11-02 13:03:24 发布

阅读量1.9k

点赞数 1

本文链接：https://blog.csdn.net/smile54533/article/details/89419127

版权

html

<body>
    <div>
          <div>
              <div class="box">账号</div>
                <ul>
                    <li>注册账号</li>
                    <li>找回密码</li>
                    <li>账号关联支付</li>
                    <li>常见问题</li>
                </ul>
          </div>
          <div>
              <div class="box">购物指南</div>
                <ul>
                    <li>购物流程</li>
                    <li>积分计划</li>
                    <li>取消订单</li>
                    <li>服务条框</li>
              </ul>
          </div>
          <div>
              <div class="box">配送方式</div>
                <ul>
                    <li>韵达</li>
                    <li>申通</li>
                    <li>中通</li>
                    <li>百世</li>
                </ul>
          </div>
          <div>
              <div class="box">支付方式</div>
                <ul>
                    <li>货到付款</li>
                    <li>支付宝</li>
                    <li>微信</li>
                    <li>银行卡</li>
                </ul>
          </div>
    </div>

JQ
	
	//首先先把所有ul里面的内容进行隐藏
    $("ul").css("display","none")
    $(".box").click(function(){
        //css有两种方法  一种设置  一种获取  前面设置ul隐藏，现在来进行判断他是否是隐藏
        if($("ul").css("display") == "none"){
        
    //(1)先用this 获取当前点击元素
    //(2)再找到box下面的ul   通过this点击事件来进行显示
    //(3)显示过后应该需要把剩下几个box进行隐藏  所以就可以
    //(4)现找到父级parent 的前后所有同辈元素 siblings 里面的 子级children   box里面包含的ul 来进行隐藏hide() 
            $(this).next().show().parent().siblings().children("ul").hide();
        //如果不是则让除了点击的元素 再进行隐藏
        }else{
            $(this).next().hide();
        }
    })