JQ 实现左侧导航栏，解决反复执行问题

2301_80178539

于 2024-05-19 20:04:08 发布

阅读量121

点赞数 2

文章标签： javascript

本文链接：https://blog.csdn.net/2301_80178539/article/details/139047437

版权

HTML部分

<body>
<div id="nav">
  <div class="navsBox">
    <div class="firstNav">购物特权</div>
    <ul>
      <li class="j1"><a href="#">全额兑换</a></li>
      <li class="j1"><a href="#">俱乐部包邮卡</a></li>
      <li class="j1"><a href="#">购物领金币</a></li>
      <li class="j1"><a href="#">每日领金币</a></li>
      <li class="j1"><a href="#">VIP阶梯价</a></li>
    </ul>

    <div class="firstNav">购物特权</div>
    <ul>
      <li class="j1"><a href="#">全额兑换</a></li>
      <li class="j1"><a href="#">俱乐部包邮卡</a></li>
      <li class="j1"><a href="#">购物领金币</a></li>
      <li class="j1"><a href="#">每日领金币</a></li>
      <li class="j1"><a href="#">VIP阶梯价</a></li>
    </ul>

    <div class="firstNav">购物特权</div>
    <ul>
      <li class="j1"><a href="#">全额兑换</a></li>
      <li class="j1"><a href="#">俱乐部包邮卡</a></li>
      <li class="j1"><a href="#">购物领金币</a></li>
      <li class="j1"><a href="#">每日领金币</a></li>
      <li class="j1"><a href="#">VIP阶梯价</a></li>
    </ul>

    <div class="firstNav">购物特权</div>
    <ul>
      <li class="j1"><a href="#">全额兑换</a></li>
      <li class="j1"><a href="#">俱乐部包邮卡</a></li>
      <li class="j1"><a href="#">购物领金币</a></li>
      <li class="j1"><a href="#">每日领金币</a></li>
      <li class="j1"><a href="#">VIP阶梯价</a></li>
    </ul>
  </div>
</div>
</body>

css部分

<style type="text/css">
* {
	margin: 0px;
	padding: 0px;
	font-size: 12px;
}
#nav .navsBox .firstNav{
		border-left:10px solid #FE705C;
	height:45px;
	line-height:45px;
	background-color:#ebebeb;

	padding-left:20px;
	width:130px;
	font-weight:bold;
	cursor:pointer;
}
#nav .navsBox{
	width:160px;
}

#nav .navsBox ul{
	display:none;
	list-style:none;
}
#nav .navsBox ul li{
	display:block;
	height:45px;
	line-height:45px;
	padding-left:70px;
	width:90px;
	background-color:#f2f2f2;
	background-position:33px 7px;
	background-repeat:no-repeat;
}
#nav .navsBox ul li a{
	color:#000;
	text-decoration:none;
}
#nav .navsBox ul li.j1{
	background-image:url(images/huan.gif);
	}
#nav .navsBox ul li.onbg{
	background-color:#f9dbd1;
}
</style>

JQ部分

使用.stop（true,false）方法让前面的动作停止然后执行下后面的

<script type="text/javascript" src="img/jquery-3.7.1.min.js"></script>
		<script type="text/javascript">
		$(function(){
    	$(".firstNav").click(function(){
    		
    		$(".firstNav").not(this).next("ul").hide(700);
    		$(this).next("ul").stop(true,false).toggle(500);
    	});
    	
	});	
		</script>