懸停時顯示下拉菜單-不起作用

Question

一個簡單的問題：我有一個導航菜單，單擊菜單項旁邊的“ +”可顯示子菜單。 但懸停時還應顯示下拉菜單。

我認為問題可能是：

a）我沒有針對正確的元素

b）切換方法是否錯誤？

JavaScript的新手，所以我不確定這里的問題是什么。

我相信我的腳本是錯誤的。 不確定是什么問題，請幫忙

 /* NAVIGATION ON CLICK */ // Primary menu drop down (mobile) $(".dropdown-toggle").click(function() { $(this).parent().find(".menu-test-container #primary-menu").toggleClass("toggle-on"); }); // Sub menu drop down $(".dropdown-toggle").click(function() { $(this).parent().find(".sub-menu:first").toggleClass("toggle-on"); }); /* NAVIGATION ON HOVER */ // Sub menu drop down $(".dropdown-toggle").hover(function() { $(this).parent().find(".menu-test-container ul li .sub-menu:first").toggleClass("toggle-on"); }); 

 /* # HEADER */ *, html { margin: 0; font-size: 16px; } .site-header { background-color: black; padding: 1rem; display: flex; justify-content: space-between; align-items: center; } .main-navigation { padding: 2rem; background-color: red; } /*.menu-toggle, .main-navigation ul ul, .main-navigation ul ul ul { display: none; } */ /* Menu styles */ .main-navigation .sub-menu { display: none; } .sub-menu.toggle-on { display: block; } .main-navigation ul, .main-navigation ul ul, .main-navigation ul ul ul { list-style: none; } .main-navigation ul li a { color: #fff; text-decoration: none; } /* First Highrarchy */ .main-navigation ul { display: flex; justify-content: flex-end; align-items: center; } .main-navigation ul li { margin-right: 2rem; } /*.dropdown-toggle:hover { display: block; } */ 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <header id="masthead" class="site-header"> <div class="site-branding"> <div class="site-branding-text"> <p class="site-title"><a href="http://localhost/wordpress/" rel="home">LOGO</a></p> </div> </div> <!-- .site-branding --> <nav id="site-navigation" class="main-navigation"> <button class="dropdown-toggle" aria-expanded="false">Primary Menu</button> <div class="menu-test-container"> <ul id="primary-menu" class="menu" aria-expanded="true"> <li id="menu-item-2035" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2035"> <a href="http://localhost/wordpress/services/">Services</a> <button class="dropdown-toggle" aria-expanded="false"> <span class="dropdown-symbol">+</span> </button> <ul class="sub-menu"> <li id="menu-item-2076" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2076"> <a href="http://localhost/wordpress/asd/">Commercial</a> <button class="dropdown-toggle toggled-on" aria-expanded="true"> <span class="dropdown-symbol">-</span> </button> <ul class="sub-menu toggled-on"> <li id="menu-item-2082" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2082"> <a href="http://localhost/wordpress/asd/">Rural</a> <button class="dropdown-toggle toggled-on" aria-expanded="true"> <span class="dropdown-symbol">-</span> </button> <ul class="sub-menu toggled-on"> <li id="menu-item-2081" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2081"> <a href="http://localhost/wordpress/services/">Electrical</a> <button class="dropdown-toggle" aria-expanded="false"> <span class="dropdown-symbol">+</span> </button> <ul class="sub-menu"> <li id="menu-item-2079" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2079"> <a href="http://localhost/wordpress/gallery/">Residential</a> <button class="dropdown-toggle" aria-expanded="false"> <span class="dropdown-symbol">+</span> </button> <ul class="sub-menu"> <li id="menu-item-2083" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2083"><a href="http://localhost/wordpress/news-updates/">News Updates</a></li> </ul> </li> </ul> </li> </ul> </li> </ul> </li> </ul> </li> <li id="menu-item-2084" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2084"> <a href="http://localhost/wordpress/asd/">Projects</a> </li> <li id="menu-item-2045" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2045"> <a href="http://localhost/wordpress/blog/">Blog</a> <button class="dropdown-toggle" aria-expanded="false"> <span class="dropdown-symbol">+</span> </button> <ul class="sub-menu"> <li id="menu-item-2078" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2078"> <a href="http://localhost/wordpress/news-updates/">About</a> <button class="dropdown-toggle" aria-expanded="false"> <span class="dropdown-symbol">+</span> </button> <ul class="sub-menu"> <li id="menu-item-2099" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2099"> <a href="http://localhost/wordpress/news-updates/">News Updates</a> </li> </ul> </li> </ul> </li> </ul> </div> </nav> <!-- #site-navigation --> <link rel="stylesheet" type="text/css" href="style.css"> </header> 

Answer 1

只有將鼠標懸停在按鈕上時，菜單才會打開。 因此，即使將鼠標懸停在菜單本身上，菜單也會關閉。 您可以添加以下內容

 $(".sub-menu").hover(function() {
  $(this).addClass("toggle-on");
});

$(".sub-menu").mouseleave(function() {
  $(this).removeClass("toggle-on");
});

由於菜單不是絕對的，因此菜單會不斷跳轉並導致UI更改。 您可以添加以下內容

.sub-menu {
  position: absolute;
  background-color: #000;
  margin-top: -26px;
  margin-left: -38px;
}

以下是更新的代碼段。

 /* NAVIGATION ON CLICK */ // Primary menu drop down (mobile) $(".dropdown-toggle").click(function() { $(this).parent().find(".menu-test-container #primary-menu").toggleClass("toggle-on"); }); // Sub menu drop down $(".dropdown-toggle").click(function() { $(this).parent().find(".sub-menu:first").toggleClass("toggle-on"); }); /* NAVIGATION ON HOVER */ // Sub menu drop down $(".dropdown-toggle").hover(function() { $(this).parent().find(".menu-test-container ul li .sub-menu:first").toggleClass("toggle-on"); }); $(".sub-menu").hover(function() { $(this).addClass("toggle-on"); }); $(".sub-menu").mouseleave(function() { $(this).removeClass("toggle-on"); }); 

 /* # HEADER */ *, html { margin: 0; font-size: 16px; } .site-header { background-color: black; padding: 1rem; display: flex; justify-content: space-between; align-items: center; } .main-navigation { padding: 2rem; background-color: red; } /*.menu-toggle, .main-navigation ul ul, .main-navigation ul ul ul { display: none; } */ /* Menu styles */ .main-navigation .sub-menu { display: none; } .sub-menu.toggle-on { display: block; } .main-navigation ul, .main-navigation ul ul, .main-navigation ul ul ul { list-style: none; } .main-navigation ul li a { color: #fff; text-decoration: none; } /* First Highrarchy */ .main-navigation ul { display: flex; justify-content: flex-end; align-items: center; } .main-navigation ul li { margin-right: 2rem; } .sub-menu { position: absolute; background-color: #000; margin-top: -26px; margin-left: -38px; } /*.dropdown-toggle:hover { display: block; } */ 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <header id="masthead" class="site-header"> <div class="site-branding"> <div class="site-branding-text"> <p class="site-title"><a href="http://localhost/wordpress/" rel="home">LOGO</a></p> </div> </div> <!-- .site-branding --> <nav id="site-navigation" class="main-navigation"> <button class="dropdown-toggle" aria-expanded="false">Primary Menu</button> <div class="menu-test-container"> <ul id="primary-menu" class="menu" aria-expanded="true"> <li id="menu-item-2035" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2035"> <a href="http://localhost/wordpress/services/">Services</a> <button class="dropdown-toggle" aria-expanded="false"> <span class="dropdown-symbol">+</span> </button> <ul class="sub-menu"> <li id="menu-item-2076" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2076"> <a href="http://localhost/wordpress/asd/">Commercial</a> <button class="dropdown-toggle toggled-on" aria-expanded="true"> <span class="dropdown-symbol">-</span> </button> <ul class="sub-menu toggled-on"> <li id="menu-item-2082" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2082"> <a href="http://localhost/wordpress/asd/">Rural</a> <button class="dropdown-toggle toggled-on" aria-expanded="true"> <span class="dropdown-symbol">-</span> </button> <ul class="sub-menu toggled-on"> <li id="menu-item-2081" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2081"> <a href="http://localhost/wordpress/services/">Electrical</a> <button class="dropdown-toggle" aria-expanded="false"> <span class="dropdown-symbol">+</span> </button> <ul class="sub-menu"> <li id="menu-item-2079" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2079"> <a href="http://localhost/wordpress/gallery/">Residential</a> <button class="dropdown-toggle" aria-expanded="false"> <span class="dropdown-symbol">+</span> </button> <ul class="sub-menu"> <li id="menu-item-2083" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2083"><a href="http://localhost/wordpress/news-updates/">News Updates</a></li> </ul> </li> </ul> </li> </ul> </li> </ul> </li> </ul> </li> <li id="menu-item-2084" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2084"> <a href="http://localhost/wordpress/asd/">Projects</a> </li> <li id="menu-item-2045" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2045"> <a href="http://localhost/wordpress/blog/">Blog</a> <button class="dropdown-toggle" aria-expanded="false"> <span class="dropdown-symbol">+</span> </button> <ul class="sub-menu"> <li id="menu-item-2078" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2078"> <a href="http://localhost/wordpress/news-updates/">About</a> <button class="dropdown-toggle" aria-expanded="false"> <span class="dropdown-symbol">+</span> </button> <ul class="sub-menu"> <li id="menu-item-2099" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2099"> <a href="http://localhost/wordpress/news-updates/">News Updates</a> </li> </ul> </li> </ul> </li> </ul> </div> </nav> <!-- #site-navigation --> <link rel="stylesheet" type="text/css" href="style.css"> </header>