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

我有一个页面上有多个手风琴。每个手风琴的末端都会显示一个V形向下图像，当您单击标题展开手风琴时，该图像将变为V形向上图像

这些功能非常好，但是如果我在accordion上有一个引用另一个accordion的链接，引用的accordion会按预期扩展，但是我的图像不会更改，因为用户没有单击新扩展的accordion

我该怎么做呢

我的

第1款

第2款


第1款

第2款

第3款

我做了一个本地项目，并根据我做的示例使用了bootstrap 3：

而且效果很好

更新：

现在我明白了：问题是折叠的类只会在单击相应的引导元素时更改。因此，您必须使用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>

内容A

更新：

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

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

---

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

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

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

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

以下是您的html示例：

---

希望这能有所帮助：）

您如何更改V形？JQuery？@StevenWeb，请查看我的CSS，它会更改图像谢谢您的更新，但我认为您误解了我的问题所在。当我点击标题时，我的手风琴图像工作正常，我的问题是，如果我点击其中一个链接展开另一个链接，那么图像不会改变感谢更新，但我似乎无法让它与我的HTML一起工作。我已经添加了我更新的CSS和HTML，我做错了什么，好像我从你的小提琴上粘贴了东西works@murday1983添加了一个带有示例的新答案您的代码片段/演示有问题，当我第一次打开它时，它们都显示为“a”，然后当我单击链接时，前两个显示为“b”，最后一个显示为“a”，它们工作正常。当我第一次进入页面时，只有第一个应该是“a”，另外两个应该是“b”。很抱歉，我看错了演示。一切似乎都按预期进行。谢谢你的帮助

    $('#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>

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

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