天天看点

javascript下拉选项卡点击显示和隐藏

javascript下拉选项卡点击显示和隐藏

javascript下拉选项卡点击显示和隐藏

HTML:

<div class="menu">
	<ul>
		<li class="list">
			<a href="#3">衬衫</a>
			<ul>
				<li><a href="#a">短袖衬衫</a></li>
				<li><a href="#b">长袖衬衫</a></li>
				<li><a href="#c">短袖T恤</a></li>
				<li><a href="#d">长袖T恤</a></li>
			</ul>
		</li>
		<li class="list">
			<a href="#3">家电</a>
			<ul>
				<li><a href="#a1">电脑</a></li>
				<li><a href="#b1">电视</a></li>
				<li><a href="#c1">洗衣机</a></li>
				<li><a href="#d1">冰箱</a></li>
			</ul>
		</li>
		<li class="list">
			<a href="#3">食物</a>
			<ul>
				<li><a href="#a2">酸奶</a></li>
				<li><a href="#b2">水果</a></li>
				<li><a href="#c2">蔬菜</a></li>
				<li><a href="#d2">麻辣烫</a></li>
			</ul>
		</li>
	</ul>
</div>


           

CSS:

<script src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
$(".list > a").click(function() {
$(this).addClass('current').next().show()
.parent().siblings().children('a').removeClass('current')
.next().hide();
return false;
})
</script>