jquery 多级手风琴答案

【问题标题】：jquery multi level accordionjquery 多级手风琴
【发布时间】：2013-06-02 10:06:32
【问题描述】：

我有一个简单的多级手风琴插件。这对我来说几乎是完美的。

(function(jQuery){
     jQuery.fn.extend({  
         accordion: function() {       
            return this.each(function() {

                var $ul = $(this);

                if($ul.data('accordiated'))
                    return false;

                $.each($ul.find('ul, li>div'), function(){
                    $(this).data('accordiated', true);
                    $(this).hide();
                });

                $.each($ul.find('a'), function(){
                    $(this).click(function(e){
                        activate(this);
                        return void(0);
                    });
                });

                var active = $('.active');

                if(active){
                    activate(active, 'toggle');
                    $(active).parents().show();
                }

                function activate(el,effect){
                    $(el).parent('li').toggleClass('active').siblings().removeClass('active').children('ul, div').slideUp('fast');
                    $(el).siblings('ul, div')[(effect || 'slideToggle')]((!effect)?'fast':null);
                }

            });
        } 
    }); 
})(jQuery);

完整代码 - http://jsfiddle.net/SKfax/

我正在尝试稍微改造此代码，但没有任何成功。我只需要在 'a' 元素内部而不是它们的父级 'li' 内切换类（'.active'）和 removeClass('.active')

P.S.：'.active' 类仅适用于当前打开部分的标题。

【问题讨论】：

你完全可以省略return void 0; - 这就是所有函数的作用:-)
不幸的是，这不是答案:(
这就是为什么我评论它而不是发布答案:-) 但是，我并没有真正理解你的问题。小提琴对我不起作用，我看不到您尝试切换链接上的 active 类而不是列表项。你为什么需要它？

标签： javascript jquery accordion jquery-ui-accordion

【解决方案1】：

这是一个适当的逻辑难题，但我认为我已经解决了（如果我误解了，请告诉我）：

JSFiddle

我认为关键是要防止activate 函数中的第一个链在第一次通过时运行。所以当你在这里打电话给activate时：

var active = $('.active');

if(active){
    activate(active, 'toggle');
    $(active).parents().show();
}

...您不想执行向上滑动兄弟并切换active 类的链。

我还调整了activate 函数，如下所述：

function activate(el,effect){

    //only do this if no effect is specified (i.e. don't do this on the first pass)
    if (!effect) {
        $(el)
             .toggleClass('active') //first toggle the class of the clicked element (i.e. the 'a' tag)
             .parent('li') //now we go up the DOM to the parent 'li'
             .siblings() //get the sibling li's
             .find('a') //get the 'a' tags below them (assuming there are no 'a' tags in the content text!)
             .removeClass('active') //remove active class from these 'a' tags
             .parent('li')
             .children('ul, div')
             .slideUp('fast'); //and hide the sibling content
    }

    //I haven't touched this
    $(el).siblings('ul, div')[(effect || 'slideToggle')]((!effect)?'fast':null);
}

【讨论】：