jquery滾輪/切換效果

Question

我正在尋找jQuery中的「滾輪切換」（理想情況下使用插件）。如果我有以下HTML：

<ul> 
    <li>Option 1</li> 
    <li>Option 2</li> 
    <li>Option 3</li> 
</ul> 

我想第一個選項被顯示和其他隱藏。每次我點擊一個選項時，它都會顯示下一個選項，並在最後一個選項後面的第一個選項中循環。當在移動網絡設備上使用時，我希望它響應向上/向下滑動事件並顯示爲「滾輪」（即使用滑動向上/向下效果）。要問的問題太多了？希望沒有，任何指針讚賞。

感謝，

保羅

Answer 1

這裏是一個小樣本，讓你開始，如果你想編寫自己的插件

它的工作原則這種標記的

<ul id="test"> 
    <li>Option 1</li> 
    <li>Option 2</li> 
    <li>Option 3</li> 
</ul> 

然後，這是插件代碼（非常基本的，但可擴展）

(function($) { 
    $.fn.roller = function(){ 

     this.children(':not(:first)').hide(); 

     this.children().click(function(){ 
      if($(this).next().length>0){ 
       $(this).hide().next().show(); 
      } 
      else{ 
       $(this).hide().parent().children(':first').show(); 
      } 
     }); 
    }; 
})(jQuery); 

，在這個理念的工作原理：

1）隱藏所有，但第一個孩子 2）單擊任何一個元素隱藏了元素和顯示下（除非點擊的元素是最後一個兒童的名單，在其中情況下顯示第一項）。

最後的插件使用此代碼實例：

$('#test').roller(); 

的jsfiddle：http://jsfiddle.net/jamiec/zpq3u/

Answer 2

我認爲你正在尋找的控制是什麼通常被稱爲一個手風琴。

有一個在jQuery用戶界面：http://jqueryui.com/demos/accordion/

對於像刷卡行爲特別的東西，我認爲你必須自己抓住他們，並決定與他們做什麼。在jQuery UI的手風琴可以指示顯示出一定的「標籤」，像這樣：

$('#my-ul').accordion('activate', tabIndex);