如何在javascript中創建子菜單？ - 修改以下代碼

-3

我想爲我的所有網頁都有一個導航欄/菜單。如何在javascript中創建子菜單？ - 修改以下代碼

我找到了一個針對該問題的解決方案（用於alla網頁的一個菜單/導航欄）。有人遇到同樣的問題，我用一個成員的答案工作得很好。解決方案是製作一個javascript嵌入代碼。問題是我不知道如何在javascript中創建子菜單。我嘗試過但沒有成功。有人可以告訴我如何修改JavaScript代碼？如果有人能幫助我，我會很開心。我用下面的代碼：

的script.js

document.getElementById("navMenu").innerHTML = 
'<ul>'+ 
    '<li><a href="index.html">Home</a></li>'+ 
    '<li><a href="services.html">Services</a></li>'+ 
    '<li><a href="about.html">About</a></li>'+ 
'</ul>';

的index.html

<body> 
    <nav id="navMenu"></nav> 
    <div> rest of web page body here </div> 
    <script src="script.js"></script> 
</body>

about.html

<body> 
    <nav id="navMenu"></nav> 
    <div> rest of web page body here </div> 
    <script src="script.js"></script> 
</body>

來源

2015-09-26 question

你不應該在JS中構建你的菜單。你應該儘量保持你的網站可訪問和語義。使用HTML構建菜單 – Jackson

但是，當更改導航欄/菜單時，我不想更改「數百」頁面！我想爲網站上的所有網頁提供一個菜單。對導航欄的一個修改應該會改變我的所有頁面。你有更好的解決方案嗎？ – question

我發現我在這個頁面上使用的解決方案：http://stackoverflow.com/questions/15445430/how-can-i-make-my-navi-bar-the-same-across-my-html這就是我使用了js代碼。 – question

我並不真的批准你這樣做的方式，因爲你應該在服務器上這樣做。

但是，您可以簡單地在要成爲子菜單的li標記內添加其他ul標記。 E.g：

var nav = document.getElementById("navMenu"); 
 
nav.innerHTML = 
 
    '<ul>' + 
 
    '<li><a href="index.html">Home</a></li>' + 
 
    '<li>' + 
 
     '<a href="#">Services</a>' + 
 
     '<ul>' + 
 
     '<li><a href="simple-service.html">Simple Service</a></li>' + 
 
     '<li><a href="regular-service.html">Regular Service</a></li>' + 
 
     '<li><a href="hard-service.html">Hard Service</a></li>' + 
 
     '</ul>' + 
 
    '</li>' + 
 
    '<li><a href="about.html">About</a></li>' + 
 
    '</ul>'; 
 

 
var anchors = nav.querySelectorAll('a'); 
 

 
for (var i = 0; i < anchors.length; i++) { 
 
    if (anchors[i].getAttribute('href') === '#') { 
 
    anchors[i].nextElementSibling.style.display = 'none'; 
 
    anchors[i].addEventListener('click', function(e) { 
 
     e.preventDefault(); 
 
     this.nextElementSibling.style.display = this.nextElementSibling.style.display.toLowerCase() === 'none' ? 'block' : 'none'; 
 
    }); 
 
    } 
 
}

<nav id="navMenu"></nav>

來源

2015-09-26 21:03:39 Buzinas

謝謝Buzinas，我會試着看看它是否有效。但是爲什麼在瀏覽器中執行菜單代碼（使用js）而不是在服務器上按照你的意願執行代碼是不好的解決方案？如果你想爲所有頁面添加一個導航欄，你會怎麼做呢？ – question

@question最好的方法是使用一些服務器技術，例如[Node.js]（https://nodejs.org/），或者PHP，ASP.NET，Ruby on Rails，Python等。但是如果你不'由於某種原因，你不想這麼做，你至少可以使用普通的HTML，並按照你的方式加載視圖，但通過[XHR]（https://developer.mozilla.org/en-US/）文檔/網絡/ API/XMLHttpRequest的）。看看[我爲你創建的這個調度者]（http://plnkr.co/edit/T8HzbLfq1OTTUjnr1Guy?p=preview）。 – Buzinas

如果我理解它是正確的，那麼區別在於服務器技術是代碼（在本例中是菜單）是在服務器上而不是在瀏覽器上執行的，因爲我正在使用當前的解決方案？爲什麼這是一個不好的解決方案？這不是我不想做，而是我不知道該怎麼做。我也想要一個簡單而不復雜的解決方案。還有另一個關於你爲我如此親切創建的搶劫者的問題。這個解決方案和我現在使用的解決方案（我的問題中的第一個js代碼）有什麼區別？對不起，我缺乏知識。謝謝！ – question

你必須爲你懷疑，將動態創建HTML元素的代碼。你的問題，雖然你沒有真正描述過問題，但很可能你的js文件正在試圖在DOM加載完成之前訪問DOM元素。而看容易檢查，如果這是發生了什麼是存儲的getElementById的結果，並檢查它們之前，你設置的innerHTML，所以：

var theNav = document.getElementById("navMenu"); 
//this will mostly likely console log as theNav being undefined 
console.log("the nav element", theNav);

的解決方案是運行你的js代碼的DOM操作完成後纔會通過在分配給window.onload的函數中運行你的代碼來加載：

window.onload = function(){ 
    //do code in here that requires interaction with the DOM 
    //because you can guarantee that the DOM elements, like nav, are loaded 
}

來源

2015-09-26 21:05:35

坦克試圖解釋，不幸的是這是高於我的頭。我很快就會明白這一點。我真的不知道「DOM」是什麼。我不知道你的意思是什麼「window.onload」對不起，你可以嘗試爲新手解釋它嗎？我的問題是我不知道如何在js中創建子菜單。我正在學習曲線。 :) – question

如何在javascript中創建子菜單？ - 修改以下代碼

回答

相關問題