css - 单击另一个 Accordion 中的链接时 Accordion 图像不会更改

Question

我有一个页面，上面有多个 Accordion 。每个 Accordion 的末尾都显示一个向下的人字形图像，当您单击标题以展开 Accordion 时，图像会变为向上的人字形图像。

这些工作完美，但如果我在 accordion 中有一个引用另一个 accordion 的链接，引用的 accordion 会按预期扩展，但我的图像不会改变，因为用户没有单击新扩展的 accordion。

我该怎么做。

我的 <a>是

<p><a class="collapsed" href="#SubTitle2" data-toggle="collapse" data-target="#collapseTwo">Test</a></p>

下面是我单击第一个 Accordion 中的链接并展开我的第二个 Accordion 时的屏幕截图。

“标题 2”的图像应该是“Chevron-Up”，因为它是“标题 1”的图像

这是通过我的 CSS 完成的，如下所示

.panel-heading .accordion-toggle-inforcentre:after
     font-family:'Glyphicons Halflings';
     content:"\e113";
     position: absolute;
     right: 2.5em;

.panel-heading .accordion-toggle-inforcentre.collapsed:after
     content:"\e114";

我完整的HTML是

<div class="panel-group">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">
                <a data-toggle="collapse" href="#collapseOne" class="accordion-toggle-inforcentre collapsed">Heading 1</a>
            </h3>
        </div>
        <div id="collapseOne" class="panel-collapse collapse">
            <div class="panel-body">
                <p>Paragraph 1</p>
                <p>Paragraph 2</p>
                <p><a class="collapsed" href="#collapseTwo" data-toggle="collapse" data-target="#collapseTwo">Paragraph 3 - opens accordion below</a></p>
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">
                <a data-toggle="collapse" href="#collapseTwo" class="accordion-toggle-inforcentre collapsed">Heading 2</a>
            </h3>
        </div>
        <div id="collapseTwo" class="panel-collapse collapse">
            <div class="panel-body">
                <p>Paragraph 1</p>
                <p>Paragraph 2</p>
                <p>Paragraph 3</p>
            </div>
        </div>
    </div>
</div>

Answer 1

我做了一个本地元素，并根据示例使用了 bootstrap 3 HERE我做了:

    .panel-heading a:after {
        font-family: 'Glyphicons Halflings';
        content: "\e113";
        position: absolute;
        right: 1.5em;
    }

    .panel-heading a.collapsed:after {
        content: "\e114";
    }

效果很好!

更新:

FIDDLE

现在我明白了:问题是折叠的类只会在单击相应的 Bootstrap 元素时发生变化。所以你必须用 jQuery 来操作这个类。

你可以这样做:

    $('#accordion').on('show.bs.collapse', function (e) {
        $(e.target).closest('.panel-default')
            .find('.panel-heading a')
            .removeClass('collapsed');
    });

我根据我的样本制作了这个片段。我刚刚在第一个容器中添加了一个自定义链接，例如:

    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                    Collapsible Group Item #1
                </a>
            </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in">
            <div class="panel-body">
                content A
                <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
                    Collapsible Group Item #1
                </a>
            </div>
        </div>
    </div>

DEMO

更新:

将折叠的类添加到关闭的 Accordion 部分，如:

<a data-toggle="collapse" 
   class="collapsed" 
   data-parent="#accordion" 
   href="#collapseTwo">
   Collapsible Group Item #2
</a>

NEW FIDDLE