jquery 多级手风琴 [英] jquery multi level accordion
问题描述
我有一个简单的多级手风琴插件.这对我来说几乎是完美的.
I've got simple multi level accordion plugin. It's almost perfect for me.
(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' 元素中切换 Class('.active') 和 removeClass('.active') 而不是它们的父元素 'li'
I'm trying to slightly remake this code, but without any success. I need to toggleClass('.active') and removeClass('.active') only inside 'a' elements and not their parent 'li'
P.S.:'.active' 类仅适用于当前打开的部分的标题.
P.S.: '.active' class applies only to the headings of currently opened sections.
推荐答案
这是一个适当的逻辑难题,但我想我已经解决了(如果我有误解,请告诉我):
This was a proper logical conundrum, but I think I have got it working (let me know if I have misunderstood):
我认为关键是防止 activate
函数中的第一个链在第一次通过时运行.所以当你在这里调用 activate
时:
I think the key was to prevent the first chain in the activate
function from running on the first pass. So when you call activate
here:
var active = $('.active');
if(active){
activate(active, 'toggle');
$(active).parents().show();
}
...您不想执行向上滑动兄弟并切换 active
类的链.
...you don't want to execute the chain that slides up siblings and toggles the active
class.
我还调整了 activate
功能,如下所述:
I have also tweaked the activate
function as described below:
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);
}
这篇关于jquery 多级手风琴的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!