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

Question

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

这些工作完美，但如果我在手风琴上有一个引用另一个手风琴的链接，则引用的手风琴会按预期展开但我的图像不会改变，因为用户没有点击新展开的手风琴。

我该怎么做。

我的<a> 是

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

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

“标题 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

我做了一个本地项目，并使用了基于样本HERE我做的bootstrap 3：

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

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

效果很好！

更新：

FIDDLE

现在我明白了：问题是折叠的类只会在点击相应的引导元素时发生变化。所以你必须用 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

更新：

将折叠的类添加到关闭手风琴部分，例如：

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

NEW FIDDLE

Answer 2

在我的示例中，在我触发外部手风琴部件的打开事件后，带有嵌套链接的手风琴将关闭，您必须通过单击相应的链接将其关闭。

在您的示例中，它保持打开状态。因此用户可以通过外部链接关闭外部手风琴。

您现在的问题是您必须使用 jquery 再次触发事件（在本例中为关闭），例如：

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

这是您的 html 示例：http://jsfiddle.net/86qrku9h/6/

希望能帮到你:)