<div>
<h3>瓜类</h3>
<ul>
<li>西瓜</li>
<li>西瓜</li>
<li>西瓜</li>
<li>西瓜</li>
</ul>
<h3>瓜类</h3>
<ul>
<li>西瓜</li>
<li>西瓜</li>
<li>西瓜</li>
<li>西瓜</li>
</ul>
<h3>瓜类</h3>
<ul>
<li>西瓜</li>
<li>西瓜</li>
<li>西瓜</li>
<li>西瓜</li>
</ul>
<h3>瓜类</h3>
<ul>
<li>西瓜</li>
<li>西瓜</li>
<li>西瓜</li>
<li>西瓜</li>
</ul>
</div>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 250px;
height: auto;
margin: 50px auto;
}
div h3{
line-height: 30px;
font-weight: 500;
color: #fff;
background-color: #222;
padding: 10px 20px;
box-sizing: border-box;
border-bottom: 1px solid #eee;
}
div h3:hover{
background-color: #666;
}
ul{
display: none;
}
ul li{
list-style: none;
line-height: 25px;
background-color: #f7f7f7;
border: 1px solid #eee;
border-top: none;
box-sizing: border-box;
padding: 10px 20px;
}
ul li:hover{
background-color: #ccc;
}
.open{
background-color: #666;
}
</style>
<script src="./js/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("h3").click(function(){
$(this).toggleClass(".open")
.siblings("h3")
.removeClass(".open")
.end()
.next("ul")
.slideToggle()
.siblings("ul")
.slideUp();
});
})
</script>
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/ff5ac40ed5404bd351c7882f0959eed5.png#pic_center)