Question

我在这里有一个jsfiddle：http://jsfiddle.net/cmscss/ou7rzj85/

它使用定义列表创建切换到较小视口大小的手风琴的标签。一切都在工作，除了我需要让一个开放式手风琴在点击时关闭。

我认为一个简单的切换就像这样：

$(this).next().toggle().prev().toggleClass('active');

我的理解是jQuery将转到下一个项目（<dd>）并切换可见性，然后转到上一个项目（<dt>）并切换.active类。

.active上的<dt>课程的切换正在进行，但是可见性切换不是 - 它只会切换，而不是关闭。

最初，我还尝试了一个更简单的版本，但看到了同样的问题：

$(this).toggleClass('active').next().toggle();

我确信这很简单，只是让我的电线穿过某处 - 任何帮助都会非常感激。

Answer 1

这个例子似乎让它有效http://jsfiddle.net/cam/aff4vL5g/

$(function () {
    //  Accordion Panels
    $(".accordion div").show();
    setTimeout("$('.accordion div').slideToggle('slow');", 1000);
    $(".accordion h3").click(function () {
        $(this).next(".pane").slideToggle("slow").siblings(".pane:visible").slideUp("slow");
        $(this).toggleClass("current");
        $(this).siblings("h3").removeClass("current");
    });
});

Answer 2

你的小提琴首先打电话给以下一行：

$('.accordion-content').hide(); // hide all content

因此，当调用.toggle时，内容将被隐藏，因此它将始终将其更改为可见。如果您将行更改为：

$('.accordion-content').not($(this).next()) //exclude current content
                       .hide(); // hide all other content

它应该按预期工作。见小提琴：http://jsfiddle.net/ou7rzj85/1/

如何使.toggle（）在响应式选项卡上使用手风琴

2 个答案: