[jQuery] 簡單作出直式伸縮選單
當網頁左側或右側需要擺放選單時，為節省網頁空間，我們會希望能夠是縮放選單，也就是當使用者點選才秀出所有的子選單，例如：
Menu1
Menu1_1
Menu1_2
Menu2
Menu2_1
Menu2_2
Menu3
Menu3_1
Menu3_1
以此選單為例，使用者未點選前，只要看到 Menu1、Menu2、Menu3就好，當點選其中一項時，在展開該項目的所有子選單。最簡單的作法如下...
假設原始html碼為
說明：
一開始先將所有的子選單隱藏起來hide()，然後，當使用者點擊選單標題(也就是span)時，被點擊的那個span的next標籤(也是就使用者想看的子選單)，會以伸縮的動畫展開(slideToggle)。
線上範例
Menu1
Menu1_1
Menu1_2
Menu2
Menu2_1
Menu2_2
Menu3
Menu3_1
Menu3_1
以此選單為例，使用者未點選前，只要看到 Menu1、Menu2、Menu3就好，當點選其中一項時，在展開該項目的所有子選單。最簡單的作法如下...
假設原始html碼為
<div id="c_navi">
<ul>
<li>
<span>Menu1</span>
<ul>
<li>Menu1_1</li>
<li>Menu1_2</li>
</ul>
</li>
<li>
<span>Menu2</span>
<ul>
<li>Menu2_1</li>
<li>Menu2_2</li>
</ul>
</li>
<li>
<span>Menu3</span>
<ul>
<li>Menu3_1</li>
<li>Menu3_2</li>
</ul>
</li>
</ul>
</div>
我們要填加的jQuery碼如下：
$('div#c_navi ul li ul').hide();
$('div#c_navi > ul > li > span').click(function(){
$(this).next().slideToggle('slow');
});
說明：
一開始先將所有的子選單隱藏起來hide()，然後，當使用者點擊選單標題(也就是span)時，被點擊的那個span的next標籤(也是就使用者想看的子選單)，會以伸縮的動畫展開(slideToggle)。
線上範例