如何从其他图标中定位单个图标？

Question

我有一个手风琴列表，当您单击每个手风琴时，它会展开 (+) 和折叠 (-)。问题是，当我尝试展开其中一个手风琴选项卡时，它可以很好地展开和折叠，但图标“-”/“+”符号也会为所有其他手风琴切换，即使它们没有被点击。我希望 '-'/'+' 图标只为我点击的手风琴切换，而不是为其他手风琴切换。

cshtml:
<h2 class="accordion-toggle collapsed" data-toggle="collapse" href="#anyId" name=""><button>@l.GetElementValue("Title")</button></h2>

 <div id="anyId" class="collapse">
    @foreach ())
   {
     // looping through accordion list. 
   }
  </div>



CSS:
.accordion-toggle:after {
    font-family: 'FontAwesome'; /* essential to enable caret symbol*/
    content: "\f068"; /* adjust as needed, taken from font-awesome.css */
    color: #0046ad;
    position: absolute;
    left: .5em;
    top: 50%;
    margin-top: -12px;
    font-size: 25px;

}

.accordion-toggle.collapsed:after {
    /* symbol for "collapsed" panels */
    /*font-family: 'FontAwesome';*/
    content: "\f067"; /* adjust as needed, taken from font-awesome.css */
    /*color: #0046ad;
    position: absolute;
    left: .5em;
    top: 50%;
    margin-top: -12px;
    font-size: 25px;*/
}

Answer 1

只需删除默认折叠的 class 并在下面使用 css。

.accordion-toggle:after {
    font-family: 'FontAwesome'; /* essential to enable caret symbol*/
    content: "\f067";
    position: absolute;
    left: .5em;
    top: 50%;
    margin-top: -12px;
    font-size: 25px;*/
}

.collapsed:after {
    content: "\f068";
}

请参阅下文link，我在这里使用了您的结构。忽略 js 试试 css,

https://jsfiddle.net/jignashagpatel/rmpnaq59/7/

如何从其他图标中定位单个图标？

How to target an individual icon from rest of the other icons?

css

jquery

accordion

font-awesome