当我们在ul中单击列表项下拉菜单时,我必须将fa角度从左改为fa角度下。请参考下面的代码。

<nav>
    <ul class="nav nav-pills nav-stacked panel-group " id="accordion" data-spy="affix" data-offset-top="605">
        <!--<li class="active"><a href="#section1">Section 1</a></li>
    <li><a href="#section2">Section 2</a></li>
    <li><a href="#section3">Section 3</a></li>-->
        <li class="panel" style="margin-top: 0px">
            <a href="javascript:;" data-toggle="collapse" data-target="#demo1" data-parent="#accordion" style="margin-left: 0px; margin-top:"> <i class="fa fa-calendar " style="margin-right:  10px;"></i>Planning<i class="fa fa-angle-left " style="float: right !important;"></i> </a>
            <ul id="demo1" class="collapse ">
                <li style="margin-left: 0px"><span class="thumbnail" style="display:inline;border: 0px solid;background-color:#21252d;color:white;font-size:9px;margin-right:  12px;">
                     YE
                  </span><a ui-sref="">Yearly</a></li><br>
                <li style="margin-left: 0px"><span class="thumbnail" style="display:inline;border: 0px solid;background-color:#21252d;color:white;font-size:9px;margin-right:  12px;">
                     MO
                  </span><a ui-sref="">Monthly</a></li>
            </ul>
        </li>
        <li class="panel" style="margin-top: 0px">
            <a href="javascript:;" data-toggle="collapse" data-target="#demo2" data-parent="#accordion" style="margin-left: 0px; margin-top:"> <i class="fa fa-book " style="margin-right:  10px;"></i>Order<i class="fa fa-angle-left" style="float: right !important;"></i> </a>
            <ul id="demo2" class="collapse " data-parent="#accordion">
                <li style="margin-left: 0px"><span class="thumbnail" style="display:inline;border: 0px solid;background-color:#21252d;color:white;font-size:9px;margin-right:  12px; text-decoration: none ;">
                     AL
                  </span><a ui-sref="dashboard">All</a></li><br>
                <li style="margin-left: 0px"><span class="thumbnail" style="display:inline;border: 0px solid;background-color:#21252d;color:white;font-size:9px;margin-right:  12px;">
                     SE
                  </span><a ui-sref="sector">Sector</a></li><br>
                <li style="margin-left: 0px"><span class="thumbnail" style="display:inline;border: 0px solid;background-color:#21252d;color:white;font-size:9px;margin-right:  12px;">
                     DR
                  </span><a ui-sref="">Date Range</a></li><br>
                <li style="margin-left: 0px"><span class="thumbnail" style="display:inline;border: 0px solid;background-color:#21252d;color:white;font-size:9px;margin-right:  12px;">
                     DE
                  </span> <a ui-sref="">Delivered</a></li><br>
                <li style="margin-left: 0px"><span class="thumbnail" style="display:inline;border: 0px solid;background-color:#21252d;color:white;font-size:9px;margin-right:  12px;">
                     PE
                  </span><a ui-sref="">Pending</a></li>
            </ul>
        </li>
        <li class="panel" style="margin-top: 0px">
            <a href="javascript:;" data-toggle="collapse" data-target="#demo3" data-parent="#accordion" style="margin-left: 0px; margin-top:"> <i class="fa fa-truck" style="margin-right:  10px;"></i>Logistics<i class="fa fa-angle-left" style="float: right !important;"></i> </a>
            <ul id="demo3" class="collapse" data-parent="#accordion">
                <li style="margin-left: 0px"> <span class="thumbnail" style="display:inline;border: 0px solid;background-color:#21252d;color:white;font-size:9px;margin-right:  12px;">
                     AL
                  </span><a ui-sref="">All</a></li><br>
                <li style="margin-left: 0px"><span class="thumbnail" style="display:inline;border: 0px solid;background-color:#21252d;color:white;font-size:9px;margin-right:  12px;">
                     SE
                 </span><a ui-sref="">Sector</a></li><br>
                <li style="margin-left: 0px"><span class="thumbnail" style="display:inline;border: 0px solid;background-color:#21252d;color:white;font-size:9px;margin-right:  12px;">
                     CU
                  </span><a ui-sref="">Customer</a></li><br>
                <li style="margin-left: 0px"><span class="thumbnail" style="display:inline;border: 0px solid;background-color:#21252d;color:white;font-size:9px;margin-right:  12px;">
                     PE
                  </span><a ui-sref="">Pending</a></li>
            </ul>
        </li>
        <li class="panel" style="margin-top: 0px">
            <a href="javascript:;" data-toggle="collapse" data-target="#demo4" style="margin-left: 0px; margin-top:"> <i class="fa fa-truck" style="margin-right:  10px;"></i>Delivery </a>
        </li>
        <li class="panel" style="margin-top: 0px">
            <a href="javascript:;" data-toggle="collapse" data-target="#demo4" style="margin-left: 0px; margin-top:"> <i class="fa fa-truck" style="margin-right:  10px;"></i>Delivery </a>
        </li>
    </ul>
</nav>

建议我要做哪些改变才能实现这一点。
请参考JsFiddlehttps://jsfiddle.net/ArunKumarUmma/4oyLhsup/1/

最佳答案

我们可以使用Jquery本身来实现这一点,请尝试下面的代码。

<i class="fa fa-angle-left" onClick="($(this)[0].className == 'fa fa-angle-left')?$(this)[0].className='fa fa-angle-down':$(this)[0].className='fa fa-angle-left'" style="float: right !important;"></i>

08-26 08:42