標籤：style blog color java io ar cti div
<style type="text/css"> ul li{ list-style: none; width:200px; height:30px; text-align: center; line-height:30px; background-color:deepskyblue; } ul{ display:none; margin:0; padding:0; } h3{ width: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>Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
