jquery下拉菜单打开的同时,同行右边的图标变化

1.用bootstrap的折叠面板时，右侧的三角图标随菜单下拉而旋转90°:

html代码

 <a class="advanced-option" data-toggle="collapse" data-parent="#accordion" data-target="#collapse">高级选项<span class="caret"></span></a>

css代码

a.advanced-option span.caret{
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    transform: rotate(270deg);
}
/*菜单下拉时caret旋转90°,caret-changed是后加的类名，菜单收起时不出现在html里，菜单弹出后由jquery将类名加载a标签上*/
a.caret-changed span.caret{
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    transform: rotate(360deg);
}

jquery代码

$(function(){
    $("a.advanced-option").click(function(){
        if($(this).hasClass('caret-changed'))
        { 
            $(this).removeClass("caret-changed");
        } else{
            $(this).addClass("caret-changed");
        }
    });
});

2.右边的图标可以由“+”换成“-”，同理。

转载于:https://www.cnblogs.com/luoyishamai/p/5290896.html