鼠标离开和鼠标在jquery中输入问题，并点击子菜单链接比接近子菜单？

Question

你好我在我的项目中编写代码。

我有两个问题，在此代码

1. 现在我来mouseenter和mouseleave在jquery如果我hover到li比我mouse leaveli和submenu比hide的submenu展示给ulsubmenu。

2. 如果点击到submenu链接不是隐藏的submebu

我的代码是这样的

$(document).ready(function(){ 
 
    $(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 > a ', function(){ 
 
     $('.top-nav-head > li').next('ul').hide(); 
 
    }); 
 
    /* ************* */ 
 
});

.top-nav-head>li.active{ 
 
    background:red; 
 
} 
 
.top-nav-head{ 
 
    list-style-type: none; 
 
    padding: 0; 
 
    margin: 0; 
 
    background:blue; 
 
    float: left;} 
 
.top-nav-head>li{ 
 
    
 
    float: left; 
 
    position: relative; 
 
} 
 
.top-nav-head>li > a{ 
 
    color: #000; 
 
     padding: 0 10px; 
 
     display: block; 
 
     line-height: 40px; 
 
     font-size: 14px; 
 
} 
 
.top-nav-head>li > ul{ 
 
    position: absolute; 
 
     display: none; 
 
     top: 100%; 
 
     left: 0; 
 
     min-width: 140px; 
 
     right: 0; 
 
     list-style-type: none; 
 
     padding: 5px 0 5px 0; 
 
     margin: 0; 
 
     background-color: red; 
 
    
 
} 
 
.top-nav-head>li > ul>li{ 
 
    display: block; 
 
} 
 
.top-nav-head>li > ul>li > a{ 
 
    display: block; 
 
      color:@white; 
 
      padding: 5px 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<ul class="top-nav-head"> 
 
      <li><a href="#">Home</a></li> 
 
      <li> 
 
       <a href="#">Admin Module</a> 
 
       <ul> 
 
       <li><a href="#">link admin 1</a></li> 
 
       <li><a href="#">link admin 2</a></li> 
 
       <li><a href="#">link admin 3</a></li> 
 
       <li><a href="#">link admin 4</a></li> 
 
       <li><a href="#">link admin 5</a></li> 
 
       </ul> 
 
      </li> 
 
      <li> 
 
      <a href="#">Project Management</a> 
 
      <ul> 
 
       <li><a href="#">Link 1</a></li> 
 
       <li><a href="#">Link 2</a></li> 
 
       <li><a href="#">Link 3</a></li> 
 
       <li><a href="#">Link 4</a></li> 
 
       <li><a href="#">Link 5</a></li> 
 
      </ul> 
 
      </li> 
 
     </ul>

Answer 1

我建议缓存隐藏ul所以你可以隐藏它们，只显示你想。

是这样的：http://jsfiddle.net/Lc8L9r9o/1/

$(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(); 
    }); 
    /* ************* */ 
}); 

Answer 2

变化jQuery代码使用mouseleave事件

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

Answer 3

@rohit阿扎德你只需要在mouserleave部分取代单线

而是这个

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

。使用本

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

Answer 4

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(); 

    });