javascript – Bootstrap的Accordion控件无法正常工作

2019年7月20日 179次阅读

现场版：

http://www.bootply.com/7aYZsAKgSy

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

所以我有这样的事情：

<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");
});

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

最佳答案 那是你要的吗？

http://www.bootply.com/MiQbLj7uIA

我只是更改了第二个手风琴的id和它的数据 – 父值.

点赞