Question

我在jQuery上辞职了。
从主页我有4个链接到手风琴页面例如：http://pluscoating.falcondesign.nl/poedercoaten/#2
这必须打开ID为2的手风琴。

我想出了如何在哈希之后添加活动类。现在的问题是，'主动'类放在'a'元素之后。但必须在课程'acc-trigger'之后添加。那我怎么能这样做呢？

我的HTML代码：

<div>
    <span class="acc-trigger">
        <a id="1" href="#">Title 1</a>
    </span>
    <div class="acc-container">
        <div class="content">content 1</div>
    </div>
    <span class="acc-trigger">
        <a id="2" href="#">Title 2</a>
    </span>
    <div class="acc-container">
        <div class="content">content 2</div>
    </div>
    <span class="acc-trigger">
        <a id="3" href="#">Title 3</a>
    </span>
    <div class="acc-container">
        <div class="content">content 3</div>
    </div>
    <span class="acc-trigger">
        <a id="4" href="#">Title 4</a>
    </span>
    <div class="acc-container">
        <div class="content">content 4</div>
    </div>
</div>

jQuery代码：

(function() {

    var $container = $('.acc-container'),
        $trigger   = $('.acc-trigger');

    var hash = window.location.hash.substring( 1 );

    $container.hide();
    $trigger.first().addClass('active').next().show();

    if( hash ) {
        var accordItem = $('.acc-trigger a#' + hash);
            $trigger.removeClass('active').next().slideUp(300);
            accordItem.addClass('active').next().show();
    }       

    var fullWidth = $container.outerWidth(true);
    $trigger.css('width', fullWidth);
    $container.css('width', fullWidth);

    $trigger.on('click', function(e) {
        if( $(this).next().is(':hidden') ) {
            $trigger.removeClass('active').next().slideUp(300);
            $(this).toggleClass('active').next().slideDown(300);
        }

        e.preventDefault();
    });


    // Resize
    $(window).on('resize', function() {
        fullWidth = $container.outerWidth(true)
        $trigger.css('width', $trigger.parent().width() );
        $container.css('width', $container.parent().width() );
    });

})();

Answer 1

尝试

if( hash ) {
    var accordItem = $('.acc-trigger a#' + hash);
    $trigger.removeClass('active').next().slideUp(300);
    accordItem.closest('.acc-trigger').addClass('active').next().show();
}

另一种解决方案是在注册click事件处理程序后触发click事件

(function() {

    var $container = $('.acc-container'), $trigger = $('.acc-trigger');

    var hash = window.location.hash.substring(1);

    $container.hide();
    $trigger.first().addClass('active').next().show();

    var fullWidth = $container.outerWidth(true);
    $trigger.css('width', fullWidth);
    $container.css('width', fullWidth);

    $trigger.on('click', function(e) {
                if ($(this).next().is(':hidden')) {
                    $trigger.removeClass('active').next().slideUp(300);
                    $(this).toggleClass('active').next().slideDown(300);
                }

                e.preventDefault();
            });
    //move this line to down after the click event handler
    if (hash) {
        $('.acc-trigger a#' + hash).triggerHandler('click');
    }

    // Resize
    $(window).on('resize', function() {
                fullWidth = $container.outerWidth(true)
                $trigger.css('width', $trigger.parent().width());
                $container.css('width', $container.parent().width());
            });

})();

jQuery Accordion：从另一个页面打开带有锚点的项目

1 个答案: