如何在展开/关闭下拉菜单时使用加号/减号圈答案

【问题标题】：How to use plus/minus circle while expanding/closing for a dropdown如何在展开/关闭下拉菜单时使用加号/减号圈
【发布时间】：2015-11-29 13:29:30
【问题描述】：

我使用 font awesome CSS 在下拉菜单上显示加号圆圈，我想在下拉菜单展开时将其更改为减号，反之亦然..

任何示例都可能会有所帮助...谢谢

【问题讨论】：

Is it possible to change between two fontawesome icons on hover?的可能重复

标签： html twitter-bootstrap css font-awesome

【解决方案1】：

您可以创建一个 div 放置在下拉列表中，为其指定“more-icon”类，该类将切换为“less-icon”（此示例需要相对定位的父级）

.more-icon:after {
content: "+";
display: block;
position: absolute;
right: 10px;
top: 10px;
color: #373534;
font-size: 30px;
font-weight: 900;}


.less-icon:after {
content: "-";
width: 17px;
height: 4px;
display: block;
position: absolute;
right: 10px;
top: 15px;
background: #373534;
font-size: 30px;
font-weight: 900;}

然后，使用一些 jquery 在打开的类之间切换 div，并为下拉列表折叠：

$('.more-icon').toggleClass('less-icon');

【讨论】：

【解决方案2】：

您可以使用较短的时间间隔检查下拉菜单是打开还是关闭，然后更改字体真棒类。

jsFiddle：http://jsfiddle.net/ukdesignservices/kxvnqee3/

var intvl = setInterval(function() {
    if ($("#dropdownMenu1").attr("aria-expanded") == "true") {
        $("#change-this").children(".fa-stack-1x").removeClass("fa-plus").addClass("fa-minus")  
    } else {
        $("#change-this").children(".fa-stack-1x").removeClass("fa-minus").addClass("fa-plus")     
    }
},10);

下拉代码来自：http://getbootstrap.com/components/#dropdowns

【讨论】：

非常感谢，但我使用 angularJS 而不是 jQuery。
@Pradvaarcruz，然后你应该标记它 angularjs。