為根目錄中的頁面工作時，文件夾中的頁面的 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 文檔根包含（與上面的代碼相同）將其引入其他頁面，從而解決了這個問題。