手风琴折叠菜单边图标改变时展开

Question

这是带有折叠菜单的菜单。我想让它右边的图标改变时展开菜单。

我想在此代码中添加<i class="fa fa-caret-down pull-right"></i>，当单击fa-caret-up时fa-caret-down图标

.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元素，并根据.list-name元素的aria-expanded属性的状态放置适当的css规则来显示或隐藏插入符号:

1. 当aria-expanded="true":只有.fa-caret-up图标是可见的
2. 当aria-expanded="false":只有.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>