[英]jquery multi level accordion
我有簡單的多層次手風琴插件。 對我來說幾乎是完美的。
(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'內切換toggleClass('。active')和removeClass('。active')
PS:“。active”類僅適用於當前打開的節的標題。
這是一個適當的邏輯難題,但我想我已經奏效了(讓我知道我是否被誤解了):
我認為關鍵是要防止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);
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.