Question

我正在尝试创建一个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>打开的时候将'active'类应用于{{1}}，并在关闭时删除该类。任何帮助都将不胜感激。

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

Example fiddle

jQuery Accordion Toggle Slide Up＆amp;下

1 个答案: