Page2 左側折疊式面版的選單

前提指引說明 【結果如區段二左側折疊式面板的滑動】

"誰" 被點選？...... click()

"誰" 被滑動？...... slideDown()

判斷是否已顯示？...... is( ':visible' )

HTML 部份

可以在 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>

CSS 部份 

<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>

JavaScript & jQuery 部份 

<script>

//滑鼠互動效果#########################################################
//設計page2左側折疊式面板選單============================================
$('.page2 #page2menu>li>h2').click(function(){
    //讓所有的子選單先全部收合
    $('#page2menu ul').slideUp(500);
    //if(目前點選的子選單不是已顯示的){
    if( !$(this).next().is(':visible') ){
        //讓目前點選的子選單向下展開
        $(this).next().slideDown(500);    
    }
});

</script>