Question

我的页面中有两个要求它们折叠或扩展彼此独立，我不希望其中一个对其他人的状态产生影响。

所以我有这样的事情：

<div class="container">
    <div class="panel-group" id="accordion">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#PANEL1">
                        <span class="glyphicon glyphicon-chevron-down"></span>
                        PANEL 1
                    </a>
                </h4>
            </div>
            <div id="PANEL1" class="panel-collapse collapse in">
                <div>
                THERE IS A FORM HERE THAT IS THE STUFF IN THIS PANEL
                </div>
            </div>
        </div>
    </div>
</div>

然后还有一个，非常相似的复制粘贴，只是内部DIV的ID不同：

我的页面中有两个要求它们折叠或扩展彼此独立，我不希望其中一个对其他人的状态产生影响。

所以我有这样的事情：

<div class="container">
    <div class="panel-group" id="accordion">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#PANEL2">
                        <span class="glyphicon glyphicon-chevron-down"></span>
                        PANEL 1
                    </a>
                </h4>
            </div>
            <div id="PANEL2" class="panel-collapse collapse in">
                <div>
                THERE IS another FORM HERE THAT IS THE STUFF IN THIS PANEL
                </div>
            </div>
        </div>
    </div>
</div>

然后是我的JavaScript：

$('.collapse').on('shown.bs.collapse', function () {
    $(this).parent().find(".glyphicon-chevron-up").removeClass("glyphicon-chevron-up").addClass("glyphicon-chevron-down");
}).on('hidden.bs.collapse', function () {
    $(this).parent().find(".glyphicon-chevron-down").removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up");
});

所以有时它会起作用，有时则不然。当它们都打开并且我第一次关闭第二个时，它也会关闭第一个。

Answer 1

这就是你想要的吗？

http://www.bootply.com/MiQbLj7uIA

我刚刚更改了第二个手风琴的id及其数据 - 父值。

手风琴控制Bootstrap无法正常工作

1 个答案: