[英]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);
Full code - http://jsfiddle.net/SKfax/ 完整代码-http://jsfiddle.net/SKfax/
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' 我只需要在'a'元素内而不是其父级'li'内切换toggleClass('。active')和removeClass('。active')
PS: '.active' class applies only to the headings of currently opened sections. PS:“。active”类仅适用于当前打开的节的标题。
This was a proper logical conundrum, but I think I have got it working (let me know if I have misunderstood): 这是一个适当的逻辑难题,但我想我已经奏效了(让我知道我是否被误解了):
I think the key was to prevent the first chain in the activate
function from running on the first pass. 我认为关键是要防止activate
函数中的第一条链在第一遍运行。 So when you call activate
here: 因此,当您致电此处activate
:
var active = $('.active');
if(active){
activate(active, 'toggle');
$(active).parents().show();
}
...you don't want to execute the chain that slides up siblings and toggles the active
class. ...您不想执行将兄弟姐妹向上滑动并切换active
类的链。
I have also tweaked the activate
function as described below: 我还调整了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);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.