我正在寻找 jquery 中的“滚轮切换”（最好使用插件）。如果我有以下 HTML：
<ul>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>
我希望显示第一个选项并隐藏其他选项。每次我“点击/单击”一个选项时，它都会显示下一个选项并在最后一个选项之后循环到第一个选项。在移动网络设备上使用时，我希望它响应向上/向下滑动事件并看起来像“滚轮”（即使用向上/向下滑动效果）。要问的问题太多了？希望不是，任何指针表示赞赏。
谢谢，
保罗
【问题讨论】：
标签： jquery mobile-website
如果您想编写自己的插件，这里有一个小示例可以帮助您入门
它的工作原理是这种标记
<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/
【讨论】：
我认为您正在寻找的控件是通常所说的手风琴。
在 jQuery UI 中有一个：http://jqueryui.com/demos/accordion/
对于像滑动操作这样的特殊内容，我认为您必须自己捕捉它们并决定如何处理它们。可以指示 jQuery UI 手风琴显示某个“选项卡”，如下所示：
$('#my-ul').accordion('activate', tabIndex);
【讨论】：