jQuery負載與構建元素

我正在一個網頁上，它有幾個不總是可見的菜單。據我所知，有3種方法來實現菜單：
1.我可以在index.html文件中聲明菜單，並將其樣式設置爲「display：none」並根據需要顯示/隱藏它們。例如：jQuery負載與構建元素

//html: 
<div id="div-to-always-show">I want to always show this</div> 
<div id="menu-to-sometimes-show" style="display:none">I want to sometimes show this</div> 

//script 
$("#menu-to-sometimes-show").show();

這樣做的缺點是，該網頁將不得不處理大量未實際影響的頁面元素。 2.我可以在需要時在jQuery中構建菜單。例如：

$("body").append(
    $("<div>").text("I want to sometimes show this") 
);

3.我可以使用.load（）來從服務器請求的菜單，並將其存儲在一個變量（因此我只需要一次請求）。例如：

var $menu = null; 
function showMenu(){ 
    if($menu === null) 
     $menu = $("<div>").load("menuToSometimesShow.html"); 
    $("body").append($menu); 
} 
function hideMenu(){ 
    $menu.detach(); 
}

所以我的問題是：是否有任何理由選擇其中一種方法？

來源

2016-09-05 EKW

這很可能會因爲太寬泛而關閉，我很抱歉地說。原因是沒有直接的答案 - 這取決於你的情況。如果您以後使用DOM腳本內容，請記住它不會被搜索引擎優化，所以這可能是一個因素。如果有疑問，請將其放入源代碼中。 – Utkanos

好的。謝謝回覆。我一直在腦中辯論幾個小時，所以我想看看其他人的想法。 – EKW

，包括它在HTML和間接地通過一類或直接通過display:none;根據情況隱藏元素主要是去，如果你的菜單是不是太大的方式，例如包括一些鏈接。
當然，如果你使用JavaScript而不是HTML，但是我肯定會推薦儘可能地使HTML保持在儘可能多的位置。而且僅限於腳本文件中的必要部分。這不僅僅是慢 - 你仍然需要提交所有的數據，所以你沒有真正的優勢。
當你加載大菜單，也許有一個或幾個子菜單，甚至可能包括圖像，那麼通過單獨的AJAX請求來處理這個問題是非常有意義的。在更復雜的情況下，僅根據需要提交部分菜單是有意義的，例如，如果僅點擊1，則不需要子菜單2到9。

來源

2016-09-05 21:03:42

這裏是你不想...答案「這要看情況。」有時可以翻轉顯示，其他翻譯爲Javascript呈現，有些翻譯爲HTML片段。一般來說，這歸結於個人偏好。

從代碼實現的角度來看，最後一個是最差的。通過將$ menu聲明爲全局作用域，$ menu成爲showMenu和hideMenu函數的副作用。換句話說，因爲這些函數依賴於超出其範圍的狀態，所以您可能會有錯誤。（特別是如果網站變得更大）

當菜單被隱藏時，瀏覽器不會繪製或重排元素，所以除非它是一個瘋狂的大菜單，否則您可以很好地將其保存在DOM上。（如果它是瘋狂的大，你會想要重構它..也許分頁）

我的首選方法是與類。這使得它們也易於生成動畫。

$('.menu').toggleClass('show'); 

.menu { 
    display:none; 
} 

.menu.show { 
    display:block; 
}

來源

2016-09-05 21:07:41

jQuery負載與構建元素

回答

相關問題