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

时间:2014-10-30 12:47:13

标签: javascript html button toggle accordion

我在网站内部有一个响应式手风琴功能,我希望(打开)和(关闭)所有内容,只需一个按钮,当所有内容都关闭时(或关闭)所有内容时,也会将其内容名称更改为(打开)开了。

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

以下是fiddle

有人可以帮我这个吗?

// Accordion //

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

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

3 个答案:

答案 0 :(得分:0)

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

See this updated fiddle (已修改以更改图标)

答案 1 :(得分:0)

要使用按钮更改减号/加号图标,必须选择具有parent()和child()jQuery方法的特定.header类,如下所示:

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

答案 2 :(得分:0)

你去了: 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);
    }
});

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

在这种情况下,我使用&#34; hasClass&#34;以确定物品是否已经打开。 因为我们只打开了#34;并且&#34;关闭&#34;各州,我们可以说,只要&#34;开放&#34;不是&#34;活跃&#34; (有课程活跃),我们应该添加&#34;活跃&#34;所有标题和内容的class标志。在相反的情况下也一样。 这可确保已切换的项目不会重新切换。