当我们点击列表项目下拉菜单时,必须将fa-angle-left更改为fa-angle-down ul。请参考下面的代码。当我们点击列表中的项目时,如何将fa-angle-left更改为fa-angle-down ul
<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>
建议我做哪些改变,我必须做到这一点。 请参阅的jsfiddle也https://jsfiddle.net/ArunKumarUmma/4oyLhsup/1/
您标明这是采用了棱角分明,然后说我的回答是不行的,当它。它只是不起作用,因为你没有使用角度 – tic
它正在工作。但是当我们点击列表项时也会改变角度。检查js小提琴。 – Arunkumar