在悬停时激活菜单子项

Question

我是 javascript 和 Jquery 的新手，我得到了这段代码，我通过悬停更改了 onclick，不知何故，当我悬停菜单元素时，子菜单处于活动状态，但是一旦我将鼠标移到菜单项上，dispariat 子菜单和我无法选择它 当我悬停菜单项时，我希望子菜单处于活动状态且可选择

$(function() {
// enable styling for jquery
  $('#mainNav').addClass('js-menu');

// close dropdown function
  function closeDropdown() {
    // $(this).children().find(".children").show();
        $('li.dropdown.open').removeClass('open').find('> ul').hide();
        $('#mainNav').css('padding-bottom','0');
    }
// initialise timeout
    var timeoutSession;
// mobile menu collapse
    $( "#toggle-menu" ).mouseover(function() {
    $(this).toggleClass('on');
        $('#menu').slideToggle();
    });


// main menu
    $('.dropdown > a').mouseover(function(e) {
        e.preventDefault();
        e.stopPropagation();
    if($(this).parent().hasClass('open') === false){ // if not open
      clearTimeout(timeoutSession);
      var menHt = $(this).parent().find('> ul').height();
      $('#menu > li').removeClass('open').find('> ul').hide();
      $('#mainNav').css('padding-bottom',menHt);
      $(this).parent().addClass('open').find('> ul').fadeIn();
      timeoutSession = setTimeout(closeDropdown, 10000);
      $(document).on("mouseover", function() {
        closeDropdown();
      });
    } else { // close menu
      clearTimeout(timeoutSession);
      $(this).parent().removeClass('open').find('> ul').hide();
      $('#mainNav').css('padding-bottom','0');
    }
    });


});

#mainNav {
  transition: padding-bottom 0.9s;
}

@media (max-width: 1300px) {
  #mainNav {
    padding-bottom: 0 !important;
  }
}
@media all and (min-width: 1300px) {
  #mainNav.js-menu #menu {
    display: block !important;
  }
}
#menu {
  padding: 0;
  list-style: none;
  margin: 0;
  margin-bottom: 1rem;
}

#menu li {
  display: inline;
}

@media all and (min-width: 1300px) {
  #menu {
    font-size: 0;
  }

  #menu li {
    display: inline-block;
    font-size: 1rem;
  }
}
#menu ul {
  background: #fff;
  display: none;
  padding: 0;
  text-align: center;
}

#menu > li > ul > li {
  margin-bottom: 0.5rem;
}

#menu li.open ul {
  display: block;
}

@media all and (min-width: 1300px) {
  #menu {
    position: relative;
  }

  #menu > li > ul {
    position: absolute;
    width: 100%;
  }

  #menu ul li {
    display: block;
    text-align: center;
  }
}

#menu > li > a:hover,
#menu > li > a.nav-path-selected {
  border-bottom: none;
 
}



#menu ul a,
#menu ul a:link,
#menu ul a:visited {
  color: #4C4D4E;
  font-size: 0.8rem;
  font-weight: 800;
}

@media all and (min-width: 1300px) {
  #menu > li > ul {
    -moz-columns: auto 190px;
         columns: auto 190px;
  }

  #menu ul li {
    -moz-column-break-inside: avoid;
         break-inside: avoid;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="nav_item" id="mainNav">
    <ul class="menu_header" id="menu">
        <li class="dropdown">
            <a class="nav_li" href="index.html">Menu</a>
            <ul class="sub-menu">
                <li>
                    <a class="nav_li" href="#">Submenu</a>
                </li>
            </ul>
        </li>
    </ul>
</nav>

Answer 1

mouseover 函数仅包含指定的元素。如果要访问下面的所有项目，则必须使用hover 函数。如果您用这些代码更改功能，问题将得到解决。

// main menu
    $('.dropdown').hover(function(e) {
        $(this).addClass('open').find('> ul').show();
    },function (){
        $(this).removeClass('open').find('> ul').hide();
    });

如果您希望这个子菜单具有动画效果，您可以为相关菜单添加一个类并赋予它一个效果。

    // main menu
            $('.dropdown').hover(function(e) {
                $(this).addClass('open').find('> ul').addClass("active");
            },function (){
                $(this).removeClass('open').find('> ul').removeClass("active");
            });

ul{
  transition:all.3s ease;
  opacity:0;
  visibility:hidden;
}

ul.active{
    opacity:1;
  visibility:visible;
}