展开时，Accordian折叠菜单侧图标会发生变化

Question

这是包含折叠菜单的菜单。我想在展开菜单时将其右侧图标更改。

点击<i class="fa fa-caret-down pull-right"></i>

后，我想在此代码fa-caret-down图标中添加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规则，以根据.list-name元素aria-expanded属性的状态显示或隐藏插入符：

1. aria-expanded =＆＃34; true ＆＃34; ：只有.fa-caret-up图标可见
2. aria-expanded =＆＃34; false ＆＃34; ：只有.fa-caret-down图标可见
＆＃13;
＆＃13;
.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;
}
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;