试图破解手风琴脚本,使它们默认关闭
Trying to hack accordian script so they are closed by default
所以,我有一个带有手风琴选项的主题 - 但是手风琴打开了第一个项目。我希望它被关闭 - 我知道它是用 JS 控制的,这不是我的强项。
我可以看到 JS 将 'open' 和 'active' 类 添加到该区域,但我似乎看不出第一个是如何工作的。
这是代码。
function handleAccordionBox(){
$('[data-norebro-accordion]').each(function(){
var accordion = $(this);
var titles = $(this).find('div.title');
var items = $(this).find('.item');
var contents = $(this).find('.content');
var iconOpened = 'ion-minus', iconClosed = 'ion-plus';
var isOutline = $(this).hasClass('outline');
var toggle = function( num ){
var opened = accordion.find('.open');
var content = contents.eq( num );
// If not active
if( !items.eq( num ).hasClass('active') ){
// Activate this item
items.removeClass('active');
items.eq( num ).addClass('active');
setTimeout(function(){
content.css('height', '').addClass('no-transition open'); // Open new content
var height = content.outerHeight() + 'px'; // Save heights
content.removeClass('no-transition open').css( 'height', (isOutline) ? '0px' : '6px' ); // Close new content
setTimeout(function(){
opened.removeClass('open no-transition').css( 'height', (isOutline) ? '0px' : '6px' ); // Close old content
content.addClass('open').css( 'height', height ); // Open new content
// Change titles
titles.find('.control span').removeClass( iconOpened ).addClass( iconClosed );
titles.eq(num).find('.control span').removeClass( iconClosed ).addClass( iconOpened );
}, 30);
}, 30);
}
else {
items.removeClass('active');
opened.removeClass('open no-transition').css( 'height', (isOutline) ? '0px' : '6px' );
titles.find('.control span').removeClass( iconOpened ).addClass( iconClosed );
};
};
titles.each(function(i){
$(this).on('click', function(){
toggle( i );
});
});
toggle( $(this).attr('data-norebro-accordion') || 0 );
this.accordionToggle = toggle;
});
};
function handleAccordionBoxSize(){
$('[data-norebro-accordion]').each(function(){
var content = $(this).find('.content.open');
var wrap = content.find('.wrap');
content.css('height', wrap.outerHeight() + 'px');
});
};`
重点是这一行:
toggle( $(this).attr('data-norebro-accordion') || 0 );
toggle
是真正打开和关闭菜单的函数。声明所有内容后,将在此处调用一次,用于具有 data-norebro-accordion
属性的元素,或者,如果未声明,则为第一个元素 (0
)
如果您希望默认情况下关闭所有内容,则只需注释该行:
// toggle( $(this).attr('data-norebro-accordion') || 0 );
所以,我有一个带有手风琴选项的主题 - 但是手风琴打开了第一个项目。我希望它被关闭 - 我知道它是用 JS 控制的,这不是我的强项。
我可以看到 JS 将 'open' 和 'active' 类 添加到该区域,但我似乎看不出第一个是如何工作的。
这是代码。
function handleAccordionBox(){
$('[data-norebro-accordion]').each(function(){
var accordion = $(this);
var titles = $(this).find('div.title');
var items = $(this).find('.item');
var contents = $(this).find('.content');
var iconOpened = 'ion-minus', iconClosed = 'ion-plus';
var isOutline = $(this).hasClass('outline');
var toggle = function( num ){
var opened = accordion.find('.open');
var content = contents.eq( num );
// If not active
if( !items.eq( num ).hasClass('active') ){
// Activate this item
items.removeClass('active');
items.eq( num ).addClass('active');
setTimeout(function(){
content.css('height', '').addClass('no-transition open'); // Open new content
var height = content.outerHeight() + 'px'; // Save heights
content.removeClass('no-transition open').css( 'height', (isOutline) ? '0px' : '6px' ); // Close new content
setTimeout(function(){
opened.removeClass('open no-transition').css( 'height', (isOutline) ? '0px' : '6px' ); // Close old content
content.addClass('open').css( 'height', height ); // Open new content
// Change titles
titles.find('.control span').removeClass( iconOpened ).addClass( iconClosed );
titles.eq(num).find('.control span').removeClass( iconClosed ).addClass( iconOpened );
}, 30);
}, 30);
}
else {
items.removeClass('active');
opened.removeClass('open no-transition').css( 'height', (isOutline) ? '0px' : '6px' );
titles.find('.control span').removeClass( iconOpened ).addClass( iconClosed );
};
};
titles.each(function(i){
$(this).on('click', function(){
toggle( i );
});
});
toggle( $(this).attr('data-norebro-accordion') || 0 );
this.accordionToggle = toggle;
});
};
function handleAccordionBoxSize(){
$('[data-norebro-accordion]').each(function(){
var content = $(this).find('.content.open');
var wrap = content.find('.wrap');
content.css('height', wrap.outerHeight() + 'px');
});
};`
重点是这一行:
toggle( $(this).attr('data-norebro-accordion') || 0 );
toggle
是真正打开和关闭菜单的函数。声明所有内容后,将在此处调用一次,用于具有 data-norebro-accordion
属性的元素,或者,如果未声明,则为第一个元素 (0
)
如果您希望默认情况下关闭所有内容,则只需注释该行:
// toggle( $(this).attr('data-norebro-accordion') || 0 );