Javascript 显示div on"；“鼠标器”；并拆下“上的内部div”；点击"；

我在两个元素上有一个

mouseenter

事件。

mouseenter

显示一个包含内容的div；在每个div中都有一个按钮，我想在其中附加一个事件来监听

单击

或

点击

，这将允许删除div本身

这是jQuery中的脚本：

$(function() {
  var $subnav = $('.subnav');
  $("#discover #watch").on({
    mouseenter: function(e) {
      $subnav.show();
      $(".close").on('click tap', function(e) {
        if ($subnav) $subnav.hide();
        else $subnav.show();
      });
    },
    mouseleave: function() {
      $subnav.hide();
    }
});

$（函数（）{
变量$subnav=$（'.subnav'）；
美元（“#发现#手表”）。在({
鼠标指针：函数（e）{
$subnav.show（）；
$（“.close”）。打开（'点击'，函数（e）{
如果（$subnav）$subnav.hide（）；
else$subnav.show（）；
});
},
mouseleave:function（）{
$subnav.hide（）；
}
});
});
标题导航ul:not（：hover）.discover-active.discover.nav-category{
颜色：#EF4B4B4B；
}
导航ul li.导航类别{
填充：0 15px 0 30px；
高度：58px；
位置：相对位置；
}
导航ul:不（：悬停）。发现活动。发现。导航类别：之前{
背景色：#EF4B4B4B；
内容：“；
位置：绝对位置；
左：0；
高度：4px；
宽度：100%；
}
标题导航。导航类别。导航类别和子导航。发现：悬停。导航类别：之前{
背景色：#EF4B4B4B；
内容：“；
位置：绝对位置；
左：0；
高度：4px；
宽度：100%；
}
标题导航。导航类别。导航类别和子导航。观察：悬停。导航类别：之前{
背景色：#e5059a；
内容：“；
位置：绝对位置；
左：0；
高度：4px；
宽度：100%；
}
.discover.subnav，
.看，subnav，
.global site switch.subnav{
显示：无；
}
.discover.subnav img{
宽度：100%；
}
标题导航。导航类别。导航类别和子导航。发现：悬停。子导航{
背景色：#000；
位置：固定；
显示：块；
左：0；
右：0；
保证金：0自动；
顶部：59px；
高度：530px；
宽度：635px；
}
标题导航。导航类别。导航类别和子导航。手表：悬停。子导航{
背景色：#000；
位置：固定；
显示：块；
左：0；
右：0；
保证金：0自动；
顶部：59px；
高度：530px；
宽度：635px；
}



发现
X


监视
原创系列
流行视频
X


您需要在单击元素的上下文中找到按钮：

$(e.target).find(".close").on ....

从现有的
mouseenter
侦听器中取出
.close
单击事件侦听器，并以父元素为目标

$(".close").on('click tap', function(e) {
    $(this).parent().hide();
});

更新的解决方案

我还删除了条件语句，好像只有在父项可见时才能单击
.close
元素，因此无需监视“隐藏的父项”
请在两个id选择器=>\discover，#watch之间添加逗号。将代码包装在文档中，以确保安全，并将关闭事件处理程序放在鼠标enter/leave之外，以便只应用一次。见下面的代码：

$(document).ready(function () {

    var $subnav = $('.subnav');
    $(".close").on('click tap', function (e) {
        if ($subnav) $subnav.hide();
        else $subnav.show();
    });

    $("#discover, #watch").on({
        mouseenter: function (e) {
            $subnav.show();
        },
        mouseleave: function () {
            $subnav.hide();
        }
    });

}); 

如果要使用纯JavaScript，您需要：

通过添加
display:none，确保默认情况下隐藏
subnav
divcss属性添加到您的
subnav
div

然后，您可以使用检索该
display
属性值，并根据检索到的值，在触发
mouseenter
或
mouseleave
事件时继续切换
subnav
display属性

最后，只要单击子
X
元素，就可以使用该属性关闭父
subnav
div


您可以在此或下面的代码片段中查看我上面描述的一个实际示例：


var discover=document.getElementById（“discover”）；
var watch=document.getElementById（“watch”）；
var close=document.queryselectoral（“.close”）；
函数openSub（e）{
var subNav=e.target.childNodes[5]；
var x=window.getComputedStyle（subNav）；
如果（x.display==“无”）{
subNav.style.display=“块”；
}否则{
subNav.style.display=“无”；
}
}
功能关闭分接头（e）{
var subNav=e.target.childNodes[5]；
subNav.style.display=“无”；
}
discover.addEventListener（“mouseenter”，openSub）；
watch.addEventListener（“mouseenter”，openSub）；
discover.addEventListener（“mouseleave”，closeSub）；
watch.addEventListener（“mouseleave”，closeSub）；
功能btnSub（e）{
e、 target.parentElement.style.display=“无”；
}
close.forEach（btn=>{
btn.addEventListener（“单击”，btnSub）；
});
.subnav{背景：绿色；显示：无；}



发现

这里是SVG


我在这儿

X



监视

这里是SVG

原创系列
流行视频
X


您是否对纯JavaScript方法持开放态度，还是只想要使用jQuery的解决方案？避免在另一个事件侦听器中创建事件侦听器。这是一种复制绑定并产生逻辑和性能问题的快速方法