Javascript 手风琴打开/关闭所有内容按钮等

我有一个网站内的响应手风琴功能，我想（打开）和（关闭）所有的内容与一个按钮，也改变了他的内容名称（打开）时，所有的内容是关闭（关闭）时，所有的内容是打开

现在，当使用（打开）按钮时，已经打开的内容再次关闭，加号和减号图标的反应不正确，当内容关闭时，显示（减号图标），反之亦然

这是你的电话号码

有人能帮我吗

// Accordion //

$('.header').click(function(){
    $('.content',$(this).parent()).slideToggle();
    $(this).toggleClass('active');
})

$('.toggle-btn').click(function(){
    $('.content').slideToggle();
    $(this).toggleClass('active');
})

---

如果在切换发生后检查类

活动

，则可以根据切换的类是否活动来更改按钮的文本

---

（编辑后也可以更改图标）

要使用按钮更改正负图标，必须选择特定的.header类，并使用parent（）和child（）jQuery方法，如下所示：

$('.toggle-btn').click(function(){
    $('.content').each( function() { 
    $(this).slideToggle();
    $(this).parent().find('.header').toggleClass('active');
     });
});

好了：

//手风琴//
$（文档）.ready（函数（）{
$（'.header'）。单击（函数（）{
$（'.content'，$（this.parent（））.slideToggle（）；
$（this.toggleClass（'active'）；
$（'.toggle btn'）.addClass（'active'）.trigger（“change”）；
})
});
$（文档）.ready（函数（）{
$（'.toggle btn'）.change（函数（）{
变量头=$（'.header'）；
变量状态='打开'；
$.each（头，函数（）{
if（$（this）.hasClass（'active'））
状态='关闭'；
});
如果（状态==“打开”）
$（this.addClass（'active'））
$（此）.text（状态）；
});
$（'.toggle btn'）。单击（函数（）{
var current=$（此）；
当前.toggleClass（'active'）；
当前触发（“变更”）；
变量内容=$（'.content'）；
$.each（内容、函数（）{
如果（！current.hasClass（'active'））
$（this.slideUp（）；
其他的
$（this.slideDown（）；
});
变量头=$（'.header'）；
$.each（头，函数（）{
if（current.hasClass（'active'））
$（this.addClass（'active'）；
其他的
$（this.removeClass（'active'）；
});      
当前触发（“变更”）；
})
});
//阅读更多//
$（窗口）。滚动（函数（）{
if（$（this）.scrollTop（）<20）{
$（'.read more'）。向下滑动（200）；
}否则{
console.log（'there'）；
$（'readmore'）。slideUp（200）；
}
});

有时使用切换可能有点棘手和混乱

在本例中，我使用“hasClass”来确定项目是否已打开。 由于我们只有“打开”和“关闭”状态，我们可以说，只要“打开”不是“活动的”（上面有活动的类），我们就应该向所有标题和内容添加“活动”类标志。在相反的情况下也是如此。

---

这样可以确保已切换的项目不会被重新切换。

谢谢Mark的帮助！但仍然存在一个问题，即如果有人已经打开了一个部分，那么当他们打开所有内容时，该部分就会关闭，反之亦然。此外，当有人手动关闭所有内容而不是主关闭按钮时，按钮的名称和功能保持不变，当有人手动打开所有内容时，该部分也会关闭。@foroloca you只需在元素中循环并检查它们是否有类

处于活动状态

，同时按钮有类

处于活动状态

。如果是，跳过它。如果没有，则添加类@foroloca（反之亦然），这也可能发生。这将需要一点调整得到修复。我现在能做的最好的事情就是给你指出正确的方向，因为我现在没有太多的空闲时间。马克，明白，谢谢你的帮助。希望我能让它工作；-）谢谢你，thibault！这段代码看起来更干净，但是当一个内容已经打开并且在单击“打开”时再次关闭时，您将如何编写更改按钮名称的代码并解决此问题。谢谢，伙计！伟大的在这个脚本中，我可以将打开到关闭状态的更改放在哪里？抱歉，我不理解您的问题抱歉，因为有很多不同的状态，所以变得很混乱，但是，即使有一个内容被打开，按钮也会将其名称更改为“关闭”，并以类似的方式运行；如果全部或一个内容被手动关闭或单独打开，则按钮会将名称更改为“打开”或“关闭”。对不起我的英语，希望你能理解。谢谢你的帮助！[New fiddle with your code and button state]（）为此，我使用了另一个事件处理程序“change”，每当标题设置为“active”或按钮被按下时，就会调用它：（如果我的答案有用，请评分：））谢谢，伙计！我想只剩下一个问题了，当点击open all open（打开全部打开）时，当然，但是当手动关闭一个或两个等时，关闭功能将作为open（打开）工作。我如何评价你的答案，因为你的答案非常有用！看不见哪里？

// Accordion //

$(document).ready(function() {

    $('.header').click(function(){
        $('.content',$(this).parent()).slideToggle();
        $(this).toggleClass('active');
         $('.toggle-btn').addClass('active').trigger("change"); 
    })

});

$(document).ready(function() {
    $('.toggle-btn').change(function(){
        var headers = $('.header');
        var state = 'open';
        $.each(headers,function(){
            if($(this).hasClass('active'))
                state = 'close';
        });
        if(state == 'open')
            $(this).addClass('active')
        $(this).text(state);
    });
    $('.toggle-btn').click(function(){
        var current = $(this);
        current.toggleClass('active');
        current.trigger("change");
        var contents = $('.content');
        $.each(contents, function(){
            if(!current.hasClass('active'))
                $(this).slideUp();
            else
                $(this).slideDown();
        });
        var headers = $('.header');
        $.each(headers, function(){
            if(current.hasClass('active'))
                $(this).addClass('active');
            else
                $(this).removeClass('active');
        });      
       current.trigger("change");
    })

});

// Read more //

$(window).scroll(function() {
    if ($(this).scrollTop() < 20) {
        $('.read-more').slideDown(200);
    } else {
        console.log('there');
        $('.read-more').slideUp(200);
    }
});