Question

我正在我的项目中编写代码。

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

现在我曾mouseenter mouseleave jquery hover li ul submenu mouse leave li submenu hide submenu 1}}如果我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>。
如果点击至{{1}}链接，则隐藏{{1}}

我的代码就是这个

＆＃13;

{{1}}

＆＃13;

{{1}}

＆＃13;

{{1}}

＆＃13;

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 azad您只需要替换 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();

  });

鼠标离开和鼠标在jquery中输入问题并单击子菜单链接而不是接近子菜单？

4 个答案: