的Javascript

Question

我正在尝试构建一个子菜单被换出的动态菜单。

<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

它为所有第一个菜单生成日志，但没有生成第二个菜单的日志。

是否有解决方案将元素复制到另一个元素中，同时仍然可以看到它？

Answer 1

尝试使用.on()代替.hover()（.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/（请参阅有关委派活动的部分）

编辑修复“向后”大括号

无法在jQuery中选择克隆的div

的Javascript

1 个答案: