我試圖建立一個動態菜單，其中的子菜單被換出。無法在jQuery中選擇克隆的div

<nav id="main-menu"> 
    <div id="categories"> 
     <a id="snacks" class="categ">Snacks &amp; Sweets</a> 
     <a id="pantry" class="categ">Pantry</a> 
     <a id="home" class="categ">Home &amp; Supplies</a> 
     <a id="etc" class="categ">DIY/Hobby</a> 
     <a id="fresh" class="categ">Fresh Food</a> 
    </div> 
    <div id="subcategories" class="scroll-container"> 

    </div> 
    <div id="options" class="scroll-container"> 

    </div> 
</nav>

的Javascript

這部分工作得很好 - 當一類是徘徊，菜單的第二部分獲取<div id="subcategories">增加其上市。

$("#categories a").hover(function() { 
    categ = $(this).attr("id"); 
    subcateg = "sub-" + categ; 

    var newDiv = $("#" + subcateg).clone(); 

    $("#subcategories").html(newDiv); 
});

這部分應該具有類似的功能，其中在此菜單中懸停某些元素顯示第三個菜單。

$("a").hover(function() { 

    let id = $(this).data("menu"); 
    let option = $("#" + id); 

    if (!$(option).hasClass("active-option")) { 
     if (id !== undefined && id !== null) { 
      div = $("#opt-" + id).clone(); 
      $("#options").html(div); 
      console.log("id is ", id, "option is ", option, "div is ", div); 
     } 
    } 
});

不幸的是，jquery沒有看到任何克隆的材料。這是可以肯定見過

$("a").hover(function() { 
    console.log($(this)); 
}

鏈接到筆： http://codepen.io/WallyNally/pen/dWqGEp

這對於所有的第一菜單的生產日誌，但沒有第二個。

是否有解決方案將元素複製到不同的元素，同時仍使其可見？

來源

2017-05-17 Naltroc

您需要確保id不相同（jquery將停止在第一個匹配之後尋找匹配項，因爲id屬性對於頁面來說是唯一的）或使用不同的選擇器 – Hypaethral

This看起來像是一個真正過度設計的解決方案，如果內容全部在同一頁面內進行硬編碼的話。 –

@RoryMcCrossan來吧生產它會更具活力。但它也可能是過度設計的 - 你看到一種更明顯更簡單的方法嗎？ – Naltroc

嘗試代替.hover()使用.on()（.hover()涵蓋兩個事件 - mouseenter和mouseexit）

$(document).on({ 
    mouseenter: function() { 
     // your hover code 
    } 
}, "a"); // or "a.categ, a.menu-item" maybe

https://api.jquery.com/hover/

http://api.jquery.com/on/（見委派事件一節）

編輯：固定「倒退」大括號

來源

2017-05-17 17:10:16

無法在jQuery中選擇克隆的div

的Javascript

回答

相關問題