|
#2
林月儿2019-09-18 18:42
 程序代码： $(function(){ $(".menu-body").hide(); $(".menu-head").click(function(){ console.log($(this).html()); let subItem = $(this).next(); if(subItem.css("display")=="none"){ subItem.show(); }else{ subItem.hide(); } }) }) |
<body>
<ul class="menu-list">
<li>
<p class="menu-head">菜单一</p>
<div class="menu-body">
<a href="#">1</a>
<a href="#">1</a>
<a href="#">1</a>
<a href="#">1</a>
<a href="#">1</a>
</div>
</li>
<li>
<p class="menu-head">菜单二</p>
<div class="menu-body">
<a href="#">2</a>
<a href="#">2</a>
<a href="#">2</a>
<a href="#">2</a>
<a href="#">2</a>
</div>
</li>
<li>
<p class="menu-head">菜单三</p>
<div class="menu-body">
<a href="#">3</a>
<a href="#">3</a>
<a href="#">3</a>
<a href="#">3</a>
<a href="#">3</a>
</div>
</li>
<li>
<p class="menu-head">菜单四</p>
<div class="menu-body">
<a href="#">4</a>
<a href="#">4</a>
<a href="#">4</a>
<a href="#">4</a>
<a href="#">4</a>
<a href="#">4</a>
</div>
</li>
</ul>
<script>
$(function(){
$(".menu-body").hide();
$(".menu-head").click(function(){
})
})
</script>
要用到show和hide，并且点开菜单A的时候下面展开，点开菜单B的时候菜单A缩回去