Question

我有一个有多个手风琴的页面。每个手风琴都有最后显示的V形图像，当您点击标题展开手风琴时，图像会变为V形图像。

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

我该怎么做。

我的<a>是

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

下面是我点击第一支手风琴中的链接时的屏幕截图，它扩展了我的第二支手风琴。

enter image description here

＆＃39;标题2＆＃39;的图像应该是雪佛龙上涨＆＃39;正如＃1标题1＆＃39;

这是通过我的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

现在我明白了：问题是折叠的类只会在点击相应的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

更新：

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

<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/

希望有助于：）

在另一个手风琴中单击链接时，手风琴图像不会改变

2 个答案: