[jQuery] 簡單作出直式伸縮選單

當網頁左側或右側需要擺放選單時，為節省網頁空間，我們會希望能夠是縮放選單，也就是當使用者點選才秀出所有的子選單，例如：
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)。

線上範例