Javascript 鼠标左键，鼠标在jquery中输入issue，然后单击子菜单链接而不是关闭子菜单？

嗨，我正在我的项目中编写代码

我在这个代码中有两个问题

现在我习惯于

mouseenter

和

mouseleave

在

jquery

中，如果我将

悬停到
li
而不是显示到
ul
子菜单，如果我
鼠标离开
li
和
子菜单
隐藏
子菜单

如果单击

子菜单链接，然后隐藏
子菜单

我的密码是

$（文档）.ready（函数（）{
$（文档）。在（'单击'，'上。顶部导航头li ul li a'，函数（）{
$（'.top nav head>li'）。removeClass（'active'）；
$（此）.最近（'.top nav head>li'）.addClass（'active'）；
});
/* ************* */
$（文档）.on（'mouseenter'，'）。顶部导航头>li>a'，函数（）{
$（this.next（'ul'）.show（）；
});
$（文档）.on（'mouseleave'，'）。顶部导航头>li>a'，函数（）{
$（'.top-nav-head>li'）.next（'ul'）.hide（）；
});
/* ************* */
});
.top导航头>li.active{
背景：红色；
}
.顶部导航头{
列表样式类型：无；
填充：0；
保证金：0；
背景：蓝色；
浮动：左；}
.顶部导航头>li{
浮动：左；
位置：相对位置；
}
.顶部导航头>li>a{
颜色：#000；
填充：0 10px；
显示：块；
线高：40px；
字体大小：14px；
}
.顶部导航头>li>ul{
位置：绝对位置；
显示：无；
最高：100%；
左：0；
最小宽度：140px；
右：0；
列表样式类型：无；
填充：5px0 5px0；
保证金：0；
背景色：红色；
}
.顶部导航头>li>ul>li{
显示：块；
}
.顶部导航头>li>ul>li>a{
显示：块；
颜色：@白色；
填充物：5px10px；
}





















将jQuery代码更改为使用
mouseleave
事件

$(document).on('mouseleave', '.top-nav-head > li > a', function(){
//    alert();
      $('.top-nav-head > li > ul').hide();
  });

@rohit azad您只需替换mouserleave部分中的单行即可

而不是这个

$('.top-nav-head > li').next('ul').hide();

用这个

$(this).next('ul').hide();

我建议缓存隐藏的
ul
，这样您就可以将它们全部隐藏起来，并显示您想要的内容

比如：

这就是你想要的吗：？@Sergio谢谢你给我答案，但我的项目中没有运行这段代码我在使用angular JS我的代码与angular有什么关系？我刚刚更改了jQuery，以使mouseenter/mouseleave按我认为您希望的方式工作。很抱歉，这不是工作检查，我离开鼠标而不是隐藏子菜单，但我想如果我离开li和子菜单ul鼠标离开，而不是隐藏子菜单/*$（文档）。on（'mouseleave'，'.top nav head>li>a'，function（）{//alert（）$（'.top-nav-head>li>ul'）.hide（）；}）；*/$（document）.on（'mouseleave'，'.top-nav-head>li>ul'，function（）{//alert（）；$（'.top-nav-head>li>ul'）.hide（）；}）；
$(document).ready(function () {
    var $uls = $('.top-nav-head li > ul');
    $(document).on('click', '.top-nav-head li ul li a', function () {
        $('.top-nav-head >li').removeClass('active');
        $(this).closest('.top-nav-head >li').addClass('active');
    });
    /* ************* */
    $(document).on('mouseenter', '.top-nav-head > li', function () {
        $uls.hide();
        $(this).find('ul').show();

    });
    $(document).on('mouseleave', '.top-nav-head > li ', function () {
        $uls.hide();
    });
    /* ************* */
});

FINAL
  $(document).on('click', '.top-nav-head li ul li a', function(){
      $('.top-nav-head >li').removeClass('active');
      $(this).closest('.top-nav-head >li').addClass('active');
  });
  /* ************* */
  $(document).on('mouseenter', '.top-nav-head > li > a', function(){
      $(this).next('ul').show();
  });
  $(document).on('mouseleave', '.top-nav-head > li', function(e){
      //alert();

      $('.top-nav-head > li > ul').hide();



  });

  $(document).on('mouseleave', '.top-nav-head > li > ul', function(){

      //alert();
      $('.top-nav-head > li > ul').hide();

  });