Question

我正在寻找jquery中的“滚轮切换”（理想情况下使用插件）。如果我有以下HTML：

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

我希望显示第一个选项，隐藏其他选项。每当我“点击/点击”某个选项时，它会显示下一个选项并在最后一个之后循环到第一个选项。当在移动网络设备上使用时，我希望它响应向上/向下滑动事件并且看起来像“滚轮”（即使用上滑/下滑效果）。要问的问题太多了？希望不是，任何指针都赞赏。

谢谢，

保

Answer 1

我认为您正在寻找的控件通常被称为手风琴。

jQuery UI中有一个：http://jqueryui.com/demos/accordion/

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

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

Answer 2

如果您想编写自己的插件，可以使用以下示例来获取

它的工作原理是这种标记

<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滚轮/拨动效果

2 个答案: