1

我是 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() );
    });

})();
4

1 回答 1

2

尝试

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

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

(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());
            });

})();
于 2013-04-23T10:41:28.123 回答