bootstrap崩溃改变css中的“icon”而不改变

Question

短版...... 我有一个css动画，当bootstrap的折叠类（折叠类）js激活折叠动画时，它应该改变。它并没有。我使用css参数错了吗？谢谢你们

HTML

<ul class="nav subMenu collapse" id="menu1">
                            <li> <a href="#">...</a> </li>
                            <li> <a href="#">...</a> </li>
                            <li> <a href="#">...</a> </li>
                        </ul>
<span class="menu-toggle-btn collapsed active" data-toggle="collapse" data-target="#menu1" ></span>

的CSS

//==Plus sign
//
.menu-toggle-btn{
    margin: 15px;
    width: 20px;
    height: 20px;
    position:absolute;
    z-index:2;
    top:15px;
    right:15px;



    &:before{
            content:' ';
            transform: rotate(-90deg);
            position:absolute;
            background: @brand-primary;
            width: 20px;
            height: 4px;
            border-radius: 10px;
            margin-bottom: 5px;
            -webkit-transition: all 0.5s linear;
            transition: all 0.3s linear;
    }

    &:after{
            content:' ';
            background: @brand-primary;
            display: block;
            width: 20px;
            height: 4px;
            border-radius: 10px;
            margin-bottom: 5px;
            -webkit-transition: all 0.3s linear;
            transition: all 0.3s linear;
            position:absolute;

    }

    .collapse.in + .menu-toggle-btn{
            &:before{
                transform: rotate(-180deg) ;
            }
    }
}