展開時手風琴摺疊菜單側面圖標更改

Question

這是摺疊菜單的菜單。展開菜單時，我想讓它右側的圖標更改。

我想在此代碼fa-caret-down圖標添加<i class="fa fa-caret-down pull-right"></i>基於.list-name元素的點擊時fa-caret-up

.category-list { 
 
    width="100px"; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div class="container"> 
 
<div class="row"> 
 
<div class="col-xs-3"> 
 
<div class="category-list" id="category-list"> 
 
    <div class="list-name" data-toggle="collapse" data-target="#all">All 
 
    <i class="fa fa-caret-down pull-right"></i> 
 
    </div> 
 

 
    <ul id="all" class="collapse"> 
 
    <li><a href="">Test1</a> 
 
    </li> 
 
    <li><a href="">Test2</a> 
 
    </li> 
 
    <li><a href="">Test3</a> 
 
    </li> 
 
    </ul> 
 

 
<div class="list-name" data-toggle="collapse" data-target="#nxt">Next 
 
    <i class="fa fa-caret-down pull-right"></i> 
 
    </div> 
 

 
    <ul id="nxt" class="collapse"> 
 
    <li><a href="">Test1</a> 
 
    </li> 
 
    <li><a href="">Test2</a> 
 
    </li> 
 
    <li><a href="">Test3</a> 
 
    </li> 
 
    </ul> 
 

 

 

 
</div> 
 
    </div> 
 
</div> 
 
    </div>

Answer 1

插入.fa-caret-up元素，並把相應的CSS規則，以顯示或隱藏插入符aria-expanded屬性的狀態：

1. 當詠歎調擴展= 「真 」：只有.fa-caret-up圖標可見
2. 當詠歎調擴展=「 假」：只有.fa-caret-down圖標可見

.category-list { 
 
    width="100px"; 
 
} 
 

 
.list-name:not([aria-expanded="true"]) .fa.fa-caret-up, 
 
.list-name[aria-expanded="false"] .fa.fa-caret-up, 
 
.list-name[aria-expanded="true"] .fa.fa-caret-down { 
 
    display:none; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div class="container"> 
 
<div class="row"> 
 
<div class="col-xs-3"> 
 
<div class="category-list" id="category-list"> 
 
    <div class="list-name" data-toggle="collapse" data-target="#all">All 
 
    <i class="fa fa-caret-down pull-right"></i> 
 
    <i class="fa fa-caret-up pull-right"></i> 
 
    </div> 
 

 
    <ul id="all" class="collapse"> 
 
    <li><a href="">Test1</a> 
 
    </li> 
 
    <li><a href="">Test2</a> 
 
    </li> 
 
    <li><a href="">Test3</a> 
 
    </li> 
 
    <li><a href="">Test4</a> 
 
    </li> 
 
    <li><a href="">Test5</a> 
 
    </li> 
 
    <li><a href="">Test6</a> 
 
    </li> 
 
    <li><a href="">Test7</a> 
 
    </li> 
 
    <li><a href="">Test8</a> 
 
    </li> 
 
    </ul> 
 

 

 
</div> 
 
    </div> 
 
</div> 
 
    </div>