【问题标题】:Trying to hack accordian script so they are closed by default试图破解手风琴脚本,使其默认关闭
【发布时间】:2021-08-12 17:35:31
【问题描述】:

所以,我有一个带有手风琴选项的主题 - 但是手风琴会打开第一个项目。我希望它关闭 - 我知道它是由 JS 控制的,这不是我的强项。

我可以看到 JS 在该区域中添加了“开放”和“活动”类,但我似乎看不到第一个类是如何工作的。

这里是代码。

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');

    });
};`

【问题讨论】:

  • 也分享html代码

标签: javascript accordion jquery-ui-accordion


【解决方案1】:

关键是这一行:

toggle( $(this).attr('data-norebro-accordion') || 0 );

toggle 是实际打开和关闭菜单的函数。一旦声明了所有内容,它就会在此处调用一次,对于具有 data-norebro-accordion 属性的元素,或者,如果未声明,则为第一个元素 (0)

如果您希望默认关闭所有内容,则只需注释该行:

// toggle( $(this).attr('data-norebro-accordion') || 0 );

【讨论】:

  • 合而为一!我曾尝试将 0 更改为 -1,但从未将其注释掉。超级巨星。
猜你喜欢
  • 2015-03-15
  • 2017-10-26
  • 1970-01-01
  • 2022-09-27
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多