<style type="text/css">
ul li{
list-style: none;
200px;
height:30px;
text-align: center;
line-height:30px;
background-color:deepskyblue;
}
ul{
display:none;
margin:0;
padding:0;
}
h3{
200px;
height:30px;
margin:0;
padding:0;
text-align: center;
line-height:30px;
background-color:deepskyblue;
}
</style>
<body> <h3 id="h3_1">新闻</h3> <ul id="ul1"> <li>新闻</li> <li>新闻</li> <li>新闻</li> </ul> <h3 id="h3_2">体育</h3> <ul id="ul2"> <li>体育</li> <li>体育</li> <li>体育</li> </ul> <h3 id="h3_3">娱乐</h3> <ul id="ul3"> <li>娱乐</li> <li>娱乐</li> <li>娱乐</li> </ul> </body>
<script>
$("h3").on("click",function(){
$('ul').not( $(this).next()).slideUp();//处理当h3高度全回原时 最后点击的那个h3下的ul不能隐藏
$(this).next().slideToggle();//next():找到每个h3后面紧邻的h3元素；slideToggle():改变h3的高度显示ul li 中的内容
});
$("li").hover(function(){//第一个函数表示鼠标移入时发生的事件第二个移除事件
$(this).css({"background-color":"#FAC7FF"})
},function(){
$(this).css({"background-color":"deepskyblue"})
})
</script>