面板没有切换回来 - Bootstrap答案

【问题标题】：Panel not toggling back - Bootstrap面板没有切换回来 - Bootstrap
【发布时间】：2016-01-15 17:28:09
【问题描述】：

我花了 5 个小时试图找到问题，但我找不到。当我单击 h5 链接时，它会按预期展开，显示及其项目，但是当我再次单击它时，它不会倒塌。我在 Safari、Firefox 和 Chrome 中对其进行了测试，同样的问题/没有区别。我一遍又一遍地检查代码，我没有发现问题。我在 StackOverflow 上找到了一些 jquery 修复程序，但问题仍然存在。我不知道还能在这里尝试什么。任何人都知道可能出了什么问题？

我正在使用： https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js 和http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js

此外，所有非引导类都是纯视觉的（颜色、背景、渐变、字体）。

<div class="footer-content container text-center">
    <div class="row hideMe2">
        <div class="panel-group" id="collapse11">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h5 class="panel-title">
                        <a data-toggle="collapse" data-parent="collapse" href="#collapse1">LEARN</a>
                    </h5>
                </div>
                <div id="collapse1" class="panel-collapse collapse">
                    <ul class="list-group">
                        <li><a href="#">Link</a></li>
                        <li><a href="#">Link1</a></li>
                        <li><a href="#">Link2</a></li>
                        <li><a href="#">Link3</a></li>
                    </ul>
                </div>
                <div class="panel-heading">
                    <h5 class="panel-title">
                        <a data-toggle="collapse" href="#collapse2">ACCOUNT</a>
                    </h5>
                </div>
                <div id="collapse2" class="panel-collapse collapse">
                    <ul class="list-group">
                        <li><a href="#">Random1</a></li>
                        <li><a href="#">Random2</a></li>
                    </ul>
                </div>
                <div class="panel-heading">
                    <h5 class="panel-title">
                        <a data-toggle="collapse" href="#collapse3">CONNECT</a>
                    </h5>
                </div>
                <div id="collapse3" class="panel-collapse collapse">
                    <ul class="list-group">
                        <li>FACEBOOK</li>
                        <li>TWITTER</li>
                    </ul>
                </div>
                <div class="panel-heading">
                    <h5 class="panel-title">
                        <a data-toggle="collapse" href="#collapse4">ANIMALS</a>
                    </h5>
                </div>
                <div id="collapse4" class="panel-collapse collapse">
                    <ul class="list-group">
                        <li><a href="#">111</a></li>
                        <li><a href="#">222</a></li>
                        <li><a href="#">333</a></li>
                        <li><a href="#">444</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

【问题讨论】：

你能在 jsFiddle 或 plunker 中重现这个问题吗？
似乎工作正常。 jsfiddle.net/jroyb8nq
我猜它一定是在您的其他 JS 或 CSS 中存在冲突或导致问题的原因，因为它在 @DinoMyte 的 jsfiddle 中运行良好。我认为我们没有足够的信息来提供帮助，除非您发布您的 CSS 和 JS，或者在小提琴中重现问题，或者发送指向我们可以调试的暂存站点的链接

标签： jquery html css twitter-bootstrap-3

【解决方案1】：

我在 plunker 中重现了您的问题，

<http://plnkr.co/edit/ZerTE4CyiLefpbypPIBn>

设置 plunker 引导程序和您的示例工作。尝试为脚本包含新的 CDN 或下载并在文件中导入它们，我认为这是您问题的解决方案。

【讨论】：