php - 在处理根目录中的页面时，Bootstrap 下拉菜单因文件夹中的页面而损坏。两组 php_include 相同的外部头文件

Question

我在工作中兼职处理一些网络方面的工作，但在这方面并没有特别丰富的经验。我不知道我所经历的过程中的什么因素导致了问题，所以如果你能忍受我，我会尝试深入解释。

最近我们的网站(基本 Bootstrap 模板)已经开始从几个页面扩展，为了保持领先地位，我选择将页眉和页脚文件拉出到它们自己的包含文件夹中，并使用...

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

...便于管理。浏览网站并剥离旧代码并将页面扩展名更改为 php(现在开始在 MAMP 上测试网站)。该网站的结构是 75% 的页面位于根目录中，25% 位于名为服务的文件夹中。所有页面都提取相同的 header.html 到目前为止一切顺利。

当我测试网站时出现问题。所有位于根目录 (public_html) 中的页面都按预期工作，标题中包含的导航下拉菜单工作正常。但是，当您单击位于/services/下拉列表(且仅下拉列表)中的任何页面时，就会中断。通过中断，我的意思是鼠标悬停时应该出现一个下拉菜单，但事实并非如此。所有其他 CSS、主题、图片 slider 代码都可以正常工作。对于/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 inspect 中损坏的下拉列表更改为元素 { display:inline } 并且下拉列表重新出现，并带有指向其他页面的工作链接。)

总的来说，我不明白为什么会这样。

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

谢谢，

Answer 1

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

解决此问题的方法是将页脚作为自己的文件放在包含文件夹中，并从那里显式链接到 js 文件夹，然后使用 php 文档根目录包含(与上面的代码相同)将其引入其他页面。