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

Question

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

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

只需删除默认折叠类并使用下面的 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";
}

请引用下面的链接，我在这里使用了您的结构。忽略 js 试试 css，

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