加上 - jQuery手风琴的减号问题

Question

当我打开和关闭相同的菜单时，加/减更新，但是当我打开一个手风琴，然后另一个，都有负号。

http://codepen.io/anon/pen/uaytq

$('.collapse-toggle').click(function (e) { 
    var that = $(this).parent(); 
    var accordion = that.find('.collapse-content'); 
    var icon = that.find('.icon'); 

    if (accordion.hasClass('open')) { 
     accordion.animate({ height: 0 }, 300).removeClass('open'); 
     icon.html('+'); 
    } else { 
     icon.html('+'); 
     $('.collapse-content.open').animate({ height: 0 }, 300).removeClass('open'); 
     var currentHeight = accordion.height(); //save current height 
     accordion.css('height', 'auto');  //temporary switch height to auto 
     var autoHeight = accordion.height(); //get auto height 
     accordion.css('height', currentHeight); //switch back to current height 
     accordion.animate({ height: autoHeight }, 300).addClass('open'); 
     icon.html('−'); 
    } 
}); 

Answer 1

更改您的else条款，使所有的图标都改成另外，如果你点击一个折叠的手风琴。

使用$('.icon').html('+');而不是icon.html('+');在else子句的开头。

$('.collapse-toggle').click(function (e) { 
    var that = $(this).parent(); 
    var accordion = that.find('.collapse-content'); 
    var icon = that.find('.icon'); 

    if (accordion.hasClass('open')) { 
     accordion.animate({ height: 0 }, 300).removeClass('open'); 
     icon.html('+'); 
    } else { 
     $('.icon').html('+'); // This used to be icon.html('+'); 
     $('.collapse-content.open').animate({ height: 0 }, 300).removeClass('open'); 
     var currentHeight = accordion.height(); //save current height 
     accordion.css('height', 'auto');  //temporary switch height to auto 
     var autoHeight = accordion.height(); //get auto height 
     accordion.css('height', currentHeight); //switch back to current height 
     accordion.animate({ height: autoHeight }, 300).addClass('open'); 
     icon.html('−'); 
    } 
}); 

Demo

Answer 2

你也可以通过添加.open类的.collapse-group并用以下方式改变与CSS的图标：

.collapse-group.open .icon:after { 
    content: "+"; 
} 

这种方式，你有能力为打开的标题和内容部分创建其他css选择器。

你也可以看看这个简单的“纯jQuery”手风琴：http://thecodeplayer.com/walkthrough/vertical-accordion-menu-using-jquery-css3