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 UI 中有一个： http://jqueryui.com/demos/accordion/

对于特殊的东西就像滑动动作一样，我认为你必须自己抓住它们并决定如何处理它们。可以指示 jQuery UI 手风琴显示某个“选项卡”，如下所示：

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