"誰" 被點選?...... click()
"誰" 被滑動?...... slideDown()
判斷是否已顯示?...... is( ':visible' )
可以在 page2 的 aside 區中輸入 ul#page2menu>li*4>h2>{PAGE$}^ul>li*5>a[href="#"]>{ITEM$} 按[TAB]鍵。
<ul id="page2menu"> <li> <h2>PAGE1</h2> <ul> <li><a href="#">ITEM1</a></li> <li><a href="#">ITEM2</a></li> <li><a href="#">ITEM3</a></li> <li><a href="#">ITEM4</a></li> <li><a href="#">ITEM5</a></li> </ul> </li> <li> <h2>PAGE2</h2> <ul> <li><a href="#">ITEM1</a></li> <li><a href="#">ITEM2</a></li> <li><a href="#">ITEM3</a></li> <li><a href="#">ITEM4</a></li> <li><a href="#">ITEM5</a></li> </ul> </li> <li> <h2>PAGE3</h2> <ul> <li><a href="#">ITEM1</a></li> <li><a href="#">ITEM2</a></li> <li><a href="#">ITEM3</a></li> <li><a href="#">ITEM4</a></li> <li><a href="#">ITEM5</a></li> </ul> </li> <li> <h2>PAGE4</h2> <ul> <li><a href="#">ITEM1</a></li> <li><a href="#">ITEM2</a></li> <li><a href="#">ITEM3</a></li> <li><a href="#">ITEM4</a></li> <li><a href="#">ITEM5</a></li> </ul> </li> </ul>
<style> #page2menu { padding-top:100px; letter-spacing:1px; } #page2menu>li>h2 { background:url(images/list_icon1.png) 5px 5px no-repeat; font-size:18px; color:#aabfff; padding:5px 0px 5px 35px; cursor:pointer; font-weight:normal; font-family:'Orbitron', 'cwTeXHei', sans-serif; } #page2menu ul a { padding:7px 0 7px 30px; color:#FFF; font-size:12px; display:block; font-family:Verdana, Geneva, sans-serif; } #page2menu ul a:hover { background-color:rgba(255, 255, 255, 0.2); } #page2menu ul a.current, #page2menu ul a.current:hover { background-color:#c3a4d3;} #page2menu ul { display:none; padding-bottom:20px; } </style>
<script> //滑鼠互動效果######################################################### //設計page2左側折疊式面板選單============================================ $('.page2 #page2menu>li>h2').click(function(){ //讓所有的子選單先全部收合 $('#page2menu ul').slideUp(500); //if(目前點選的子選單不是已顯示的){ if( !$(this).next().is(':visible') ){ //讓目前點選的子選單向下展開 $(this).next().slideDown(500); } }); </script>