为根目录中的页面工作时，文件夹中的页面的 Bootstrap 下拉菜单损坏。 两组 php_include 相同的外部头文件

Question

我在工作中运行一些网络东西，在这方面没有特别的经验。 我不知道我所经历的过程中的哪些因素导致了打嗝，所以如果你能忍受我，我会尝试深入解释。

最近我们的网站（基本引导模板）已经开始从几页扩展出来，为了保持最重要的状态，我选择将页眉和页脚文件拉到它们自己的包含文件夹中，并使用...

<!--Header include-->
<?php $path = $_SERVER['DOCUMENT_ROOT'] . "/includes/"; include ( $path . 'header.html' ); ?>

...为了更容易管理。 浏览该站点并删除旧代码并将页面扩展名更改为 php（现在开始在 MAMP 上测试站点）。该站点的结构是 75% 的页面位于根目录中，25% 位于名为 services 的文件夹中。 所有页面都使用相同的 header.html 到目前为止一切顺利。

当我测试网站时出现问题。 位于 root (public_html) 中的所有页面都按预期工作，标题中包含的导航下拉菜单工作正常。 但是，当您单击位于 /services/ 中的任何页面时，下拉列表（并且只有下拉列表）会中断。 通过中断，我的意思是鼠标悬停时应该出现一个下拉菜单，但它没有。 所有其他 CSS、主题、图片滑块的代码都可以正常工作。 对于位于 /services/ 文件夹中的这些页面，这只是导航栏的这一元素。

我通过检查 firefox 比较了工作页面和损坏页面的元素，这是我唯一能看到任何差异的地方。

在工作页面上，工作下拉 html 显示为...

ul class="dropdown-menu bold" style="display:none;"

使用 CSS 规则...

element {
    display: none;
}
.navbar .nav li .dropdown-menu {
    z-index: 1000;
}
header ul.nav li ul {
    z-index: 1000;
    margin-top: 20px;
}
.bold {
    font-weight: 900;
}
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0px;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 180px;
    padding: 0px;
    margin: 2px 0px 0px;
    list-style: outside none none;
    background: none repeat scroll 0% 0% #343434;
    box-shadow: none;
    border-right: 2px solid #302F2F;
    border-width: medium 2px 2px;
    border-style: none solid solid;
    border-color: -moz-use-text-color #302F2F #302F2F;
    -moz-border-top-colors: none;
    -moz-border-right-colors: none;
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    border-image: none;
}
.dropdown-menu {
    border-radius: 0px;
}
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0px;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 160px;
    padding: 5px 0px;
    margin: 2px 0px 0px;
    list-style: outside none none;
    background-color: #FFF;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
    background-clip: padding-box;
}
ul ul, ul ol, ol ol, ol ul {
    margin-bottom: 0px;
}
ul ul, ul ol, ol ol, ol ul {
    margin-bottom: 0px;
}
ul, ol {
    padding: 0px;
    margin: 0px 0px 10px 25px;
}
ul, ol {
    padding: 0px;
    margin: 0px 0px 10px 25px;
}
li {
    line-height: 1.6em;
}
li {
    line-height: 20px;
}
.nav {
    list-style: outside none none;
}
body {
    font-family: "Open Sans",sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6em;
    color: #656565;
}
body {
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: #333;
}
html {
    font-size: 100%;
}

损坏的页面显示...的 html

<ul class="dropdown-menu"></ul> <<< I think this might be a red flag??

和...的CSS

element {
}
.navbar .nav li .dropdown-menu {
    z-index: 1000;
}
header ul.nav li ul {
    z-index: 1000;
    margin-top: 20px;
}
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0px;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 180px;
    padding: 0px;
    margin: 2px 0px 0px;
    list-style: outside none none;
    background: none repeat scroll 0% 0% #343434;
    box-shadow: none;
    border-right: 2px solid #302F2F;
    border-width: medium 2px 2px;
    border-style: none solid solid;
    border-color: -moz-use-text-color #302F2F #302F2F;
    -moz-border-top-colors: none;
    -moz-border-right-colors: none;
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    border-image: none;
}
.dropdown-menu {
    border-radius: 0px;
}
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0px;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 160px;
    padding: 5px 0px;
    margin: 2px 0px 0px;
    list-style: outside none none;
    background-color: #FFF;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
    background-clip: padding-box;
}
ul ul, ul ol, ol ol, ol ul {
    margin-bottom: 0px;
}
ul ul, ul ol, ol ol, ol ul {
    margin-bottom: 0px;
}
ul, ol {
    padding: 0px;
    margin: 0px 0px 10px 25px;
}
ul, ol {
    padding: 0px;
    margin: 0px 0px 10px 25px;
}
li {
    line-height: 1.6em;
}
li {
    line-height: 20px;
}
.nav {
    list-style: outside none none;
}
body {
    font-family: "Open Sans",sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6em;
    color: #656565;
}
body {
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: #333;
}
html {
    font-size: 100%;
}

（我可以手动将 firefox 检查中损坏的下拉菜单更改为 element { display:inline } 并且下拉菜单重新出现，并带有指向其他页面的工作链接。）

总的来说，我无法理解为什么会发生这种情况。

• 所有其他 CSS 都在处理损坏的页面，因此指向该位置的链接必须有效。
• 所有页面共享相同的 header.html，它使用相同的 html 来创建工作下拉列表。
• 所有 CSS 在每个页面的开头单独调用（不是在 header.html 文件中）。
• 如果所有页面都查看同一个头文件，并且它们都指向同一个 CSS，我如何得到不同的结果？

谢谢，

Answer 1

不久前找到了这个答案，我想我会更新。 为导航栏设置动画的 javascript 已写出并包含在页脚中，并带有指向 js 文件夹的相对链接，当页面移入 services 文件夹时，该文件夹尚未更新。 因此动画将失败，因为无法找到 javascript 文件。

通过将页脚作为自己的文件放在包含文件夹中，并从那里显式链接到 js 文件夹，然后使用 php 文档根包含（与上面的代码相同）将其引入其他页面，从而解决了这个问题。