Accordion打开/关闭所有内容按钮等

Accordion open/close all content button and more

本文关键字：按钮 打开 Accordion      更新时间：2023-09-26

我在网站内有一个响应手风琴功能，我想用一个按钮（打开）和（关闭）所有内容，当所有内容关闭时，这个按钮还可以将他的内容名称更改为（打开），而当所有内容打开时，则更改为（关闭）。

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

这是小提琴

有人能帮我吗？

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

好了：http://jsfiddle.net/w3srayj6/21/

// 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);
    }
});

有时使用开关可能会有点棘手和混乱。

在这种情况下，我使用"hasClass"来确定项目是否已经打开。由于我们只有"打开"answers"关闭"状态，我们可以说，只要"打开"不是"活动的"（上面有活动的类），我们就应该将"活动"类标志添加到所有标头和内容中。在相反的情况下也是如此。这样可以确保已经切换的项目不会被重新切换。

要用按钮更改减号/加号图标，您必须选择特定的.header类和parent（）和child（）jQuery方法，如下所示：

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

如果在切换发生后检查类active，则可以根据切换的类是否处于活动状态来更改按钮的文本。

查看此更新的fiddle（经过编辑以更改图标）

相关文章：