Question

的Lorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem我PSUM

Answer 1

试试这个：

$("#toggle > li > div").click(function(){
if(false == $(this).next().is(':visible')) {
    $('#toggle ul').slideUp();  
    $("span.minus-btn").removeClass('minus-btn'); // When slide goes up remove 'minus-btn' class
}
$(this).next().slideToggle();
});


$("#toggle > li > div").click(function() {

     $("#toggle > li > div").removeClass("active");
     $(this).addClass('active');

if($(this).hasClass("active")){
   $("span.plus-btn", this).toggleClass('minus-btn');
     }
});

Demo

Answer 2

您只能在点击的元素上更改加号/减号图标。您可以将所有span元素更改为“plus-btn”，而将活动元素更改为减号。与您一样，首先删除所有活动类$("#toggle > li > div").removeClass("active");

更新

$("#toggle > li > div").click(function() {
      $("#toggle > li > div").removeClass("active");
      $(this).addClass('active');      

     if($(this).hasClass("active")){
        $("span.plus-btn", this).toggleClass('minus-btn');
     } else {
         $('.minus-btn').removeClass('minus-btn');
     }
});

Fiddle Demo

Answer 3

你应该在滑动时删除'minusbtn'类。

将其替换为您的代码：

 $("#toggle > li > div").click(function(){
    if(false == $(this).next().is(':visible')) {
        $('#toggle ul').slideUp();
        $("#toggle *").removeClass('minus-btn');
    }
    $(this).next().slideToggle();
});


$("#toggle > li > div").click(function() {
      $("#toggle > li > div").removeClass("active");
         $(this).addClass('active');

     if($(this).hasClass("active")){
        $("span.plus-btn", this).toggleClass('minus-btn');
    }
});

Answer 4

试试这个，

$("#toggle > li > div").click(function(){
    if(false == $(this).next().is(':visible')) {
        $('#toggle ul').slideUp();
         $("span.minus-btn").removeClass('minus-btn');
    }
    $(this).next().slideToggle();
});


$("#toggle > li > div").click(function() {
        $("#toggle > li > div").removeClass("active");
        $(this).addClass('active');

if($(this).hasClass("active")){
       $(this).find("span.plus-btn").toggleClass('minus-btn');
 }

});

Demo

幻灯片切换无法正常工作（图标未正确更改）

4 个答案: