Bootstrap [=10th=] 手风琴不会在二级页面上折叠

Question

我在我的网站和主页上使用 Bootstrap 手风琴菜单，它工作得很好，但在除主页外的任何页面上，它根本不起作用，当我单击菜单折叠 link，URL 简单地更改为#collapseOne。

我将其用作 Business Catalyst 中的 ContentHolder 可能会很有趣。这里是 link 到 JSFiddle

和here's the website问题出现的地方。

非常感谢。

<div class="panel-group" id="accordion">
<div class="panel panel-default">
    <div class="panel-heading">
        <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> RC Cars</a>
        </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse">
        <div class="panel-body">
            <ul>
            <li><h4 class="text-left"><a href="rc-electric-cars ">RC Electric Cars</a></h4></li>
            <li><h4 class="text-left"><a href="/">RC Petrol Cars</a></h4></li>
            <li><h4 class="text-left"><a href="/">RC Nitro Cars</a></h4></li>
            </ul>
        </div>
    </div>
</div>
<div class="panel panel-default">
    <div class="panel-heading">
        <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> RC Trucks</a>
        </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
        <div class="panel-body">
            <ul>
            <li><h4 class="text-left"><a href="rc-electric-cars ">RC Electric Trucks</a></h4></li>
            <li><h4 class="text-left"><a href="/">RC Petrol Trucks</a></h4></li>
            <li><h4 class="text-left"><a href="/">RC Nitro Trucks</a></h4></li>
            </ul>
        </div>
    </div>
</div>
<div class="panel panel-default">
    <div class="panel-heading">
        <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"> RC Planes</a>
        </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse">
        <div class="panel-body">
            <ul>
            <li><h4 class="text-left"><a href="rc-electric-cars ">RC Electric Planes</a></h4></li>
            <li><h4 class="text-left"><a href="/">RC Petrol Planes</a></h4></li>
            <li><h4 class="text-left"><a href="/">RC Nitro Planes</a></h4></li>
            </ul>
        </div>
    </div>
</div>

Answer 1

那是因为您在主页上添加了 javascript 个文件（而不是在辅助页面中添加）。

你应该搬家

<!-- jQuery Version 1.11.1 -->
<script src="js/jquery.js"></script>

<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.js"></script>

到 "header" 标记内容（就像 .css 文件一样），它将适用于所有页面。

Answer 2

我查看了您的网站。

您的代码（主页除外）缺少 link 到 JQuery js 和 Bootstrap JS

<script src="js/jquery.js"></script>

<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.js"></script></p>

将此添加到其余页面

Bootstrap [=10th=] 手风琴不会在二级页面上折叠

Boostrap CSS accordion not collapsing on secondary pages

html

css

twitter-bootstrap

accordion

business-catalyst