1

我正在尝试创建一个 jQuery 手风琴区域。我的标记如下：

<ul class="accordion">
    <li>
        <a class="toggle" href="#one">Toogle 1</a>
        <div>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
    </li>
    <li>
        <a class="toggle" href="#two">Toogle 2</a>
        <div>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
    </li>
</ul>

我的jQuery如下：

$(document).ready( function() {

        var accordion_head = $('.accordion > li > .toggle'),
            accordion_body = $('.accordion li > div');

        accordion_head.on('click', function(event) {

            event.preventDefault();

            if ($(this).attr('class') != 'active') {
                accordion_body.slideUp('normal');
                $(this).next().stop(true,true).slideDown('normal');
                accordion_head.removeClass('active');
                $(this).addClass('active');
            }
        });
});

我想做的是在单击该区域的<a>标签时打开和关闭（切换）每个区域。当单击另一个区域时，我不希望其他区域关闭<a>。我仍然希望在打开时将“活动”类应用于<a>它，并在关闭时删除该类。对此的任何帮助将不胜感激。

4

1 回答 1

1

哟，DJ！刚刚遇到这个问题:)

希望这仍然有一些帮助：

var accordion_head = $('.accordion > li > .toggle');

accordion_head.on('click', function (event) {
    var $a = $(this);
    event.preventDefault();

    if ($a.hasClass('active')) {
        $a.removeClass('active').siblings('div').slideUp();
    }
    else {
        $a.addClass('active').siblings('div').slideDown();
    }
});

示例小提琴

于 2013-09-16T14:29:17.947 回答