Question

我正在制作一个FAQ页面，其中的答案已折叠，然后显示全部并隐藏所有对问题/答案的控制。

我的问题是我正在使用toggleClass切换＆＃39; +＆＃39;或者＆＃39; - ＆＃39;在问题旁边签名，但是当您点击“显示所有答案”时＃39;或者＆＃39;隐藏所有答案＆＃39;班级不停地翻转。

无论如何，我不是一个jquery大师。

$(document).ready(function() {
$('.showThis').click(function() {

    $(this).next('.answer').slideToggle(500);
    $(this).toggleClass('showMinus');

});
$('#expandAll').click(function() {        
    $('.answer').slideDown();
     $('.showThis').toggleClass('showMinus');    
});
$('#collapseAll').click(function() {        
    $('.answer').slideUp();    
     $('.showThis').toggleClass('showMinus');    
}); }); // end ready

http://jsfiddle.net/ufe73cfb/2/

Answer 1

试试这个。 Fiddle

$('#expandAll').click(function() {        
    $('.answer').slideDown();
     $('.showThis').addClass('showMinus');    
});
$('#collapseAll').click(function() {        
    $('.answer').slideUp();    
     $('.showThis').removeClass('showMinus');    
});

Answer 2

这对你有用，这是 DEMO

$(document).ready(function() {
    $('.showThis').click(function() {

        $(this).next('.answer').slideToggle(500);
        $(this).toggleClass('showMinus');

    });

    $('#expandAll').click(function() {  debugger;      
        $('.answer').slideDown();
         $('.showThis').addClass('showMinus');    
    });
    $('#collapseAll').click(function() {      debugger;  
        $('.answer').slideUp();    
         $('.showThis').removeClass('showMinus');    
    });
});

Answer 3

你需要使用addClass和removeClass而不是toggleClass。

$(document).ready(function() {
$('.showThis').click(function() {

    $(this).next('.answer').slideToggle(500);
    $(this).toggleClass('showMinus');

});
$('#expandAll').click(function() {        
    $('.answer').slideDown(500);
    $('.showThis').addClass('showMinus');
});
$('#collapseAll').click(function() {        
    $('.answer').slideUp();    
    $('.showThis').removeClass('showMinus');    
});

}）

新小提琴：http://jsfiddle.net/ufe73cfb/6/

全部展开 - 折叠所有Div样式问题

3 个答案: