Question

我有下一个问题。

手风琴在点击时打开，但当我再次点击它关闭时，它不会。

我的HTML标记：

<div class="title">

    <a href="#">Heading</a>

</div>

<div class="content">

    <li><p>Content</p></li>

</div>

</section>

我的javascript代码：

(function() {
    'use strict';
    $('.accordion').on('click', '.title', function(event) {
        event.preventDefault();
        $(this).siblings('.accordion .active').next().slideUp('normal');
        $(this).siblings('.accordion .title').removeClass("active");

        if ($(this).next().is(':hidden') === true) {
            $(this).next().slideDown('normal');
            $(this).addClass("active");
        }
    });
    $('.accordion .content').hide();
    $('.accordion .active').next().slideDown('normal');
})();

Answer 1

您可以使用slideToggle和toggleClass并在函数内使用this来简化代码（这是点击的项目）。

代码：

(function () {
    'use strict';
    $('.accordion').on('click', '.title', function (event) {
        event.preventDefault();
        $(this).siblings('.content').slideToggle('normal');
        $(this).toggleClass("active");
    });
    $('.accordion .content').hide();
    $('.accordion .active').next().slideDown('normal');
})();

演示：http://jsfiddle.net/IrvinDominin/9MSAC/1

更新

要一次只打开一个元素，您可以先关闭它们。

代码：

(function () {
    'use strict';
    $('.accordion').on('click', '.title', function (event) {
        event.preventDefault();
        $('.title').not($(this)).siblings('.content').slideUp('normal');
        $('.title').not($(this)).removeClass("active");
        $(this).siblings('.content').slideToggle('normal');
        $(this).toggleClass("active");
    });
    $('.accordion .content').hide();
    $('.accordion .active').next().slideDown('normal');
})();

演示：http://jsfiddle.net/IrvinDominin/9MSAC/8/

Answer 2

<ul class="faqContainerUL">
            <li>
                &nbsp;How do I add a device?
                <p>
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                </p>
            </li>
            <li>
                &nbsp;What is device Group and how does it differ from Location?
                <p>
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                </p>
            </li>

的Javascript

$.each($('ul.faqContainerUL li'), function (index, elem) {
$(elem).on('click', function () {
    $(this).children().slideToggle();
});
});

小提琴 http://jsfiddle.net/dh25L/

Answer 3

感谢Irvin Dominin又名爱德华给出答案。我正在给出更新的答案，作为＆＃34; user2504339＆＃34;想点击其他手风琴。

  (function () {
'use strict';
$('.accordion').on('click', '.title', function (event) {
    event.preventDefault();
    if($(this).hasClass('active'))
    {                         $(this).siblings('.content').slideToggle('normal');
    $(this).toggleClass("active");
    }
    else
    {
    $('.accordion .content').hide();
    $(this).siblings('.content').slideToggle('normal');
    $(this).toggleClass("active");
    }
});
$('.accordion .content').hide();
$('.accordion .active').next().slideDown('normal');
})();

Updated JSFIDDLE DEMO

手风琴打开，但没有关闭

3 个答案:

更新