javascript - 将下拉菜单定位在其父级下

标签 javascript jquery html css

所以我有一个小但烦人的问题。我希望子菜单显示在每个子菜单的父级 li 下。

  • 现在，当鼠标悬停在父菜单上时，每个子菜单都会显示在 第一个 li 项。

尝试:我做了.main-navigation ul position relative while .main-navigation ul ul 是绝对定位的——请看代码。想法？

(function($) {


  /* NAVIGATION ON CLICK */
  // Primary menu drop down (mobile)
  $(".dropdown-toggle").click(function() {
    $(this).parent().find(".sub-menu:first").toggleClass("toggle-on");
  });


  /* NAVIGATION ON HOVER */
  // Sub menu drop down 
  // $(".main-navigation ul li.menu-item-has-children").hover(function() {
  // 	$(this).find(".sub-menu:first").toggleClass("toggle-on");
  // });

  var menu_timeout;

  $(".main-navigation ul li.menu-item-has-children").hover(
    function() { // Mouseenter
      var that = $(this);
      that.find(".sub-menu:first").addClass("toggle-on");
      clearTimeout(menu_timeout);
    },
    function() { // Mouseleave
      var that = $(this);
      menu_timeout = setTimeout(function() {
        that.find(".sub-menu:first").removeClass("toggle-on");
      }, 250);
    }
  );

  /* submenu click mobil version */
  $(".menu-toggle").click(function() {
    $(" .main-navigation ul:first").toggleClass("toggle-on");
  });

  // $(".main-navigation li.menu-item-has-children").mouseleave(function() {
  //   $(".sub-menu").removeClass("toggle-on");
  // });
})(jQuery);
*,
html {
  margin: 0;
  font-size: 22px;
}

.site-header {
  width: 100%;
  /*min-height: 99px;*/
  background-color: #0b80c3;
  z-index: 100;
}

.header-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  width: 100%;
  max-width: 1920px;
  margin: auto;
}

@media screen and (min-width: 1024px) {
  .site-header {
    position: fixed;
  }
  .header-wrap {
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    margin: 0 auto;
  }
  .site-branding {
    margin-left: 2.5rem;
  }
}

@media screen and (min-width: 1922px) {
  .header-wrap {
    left: 0;
  }
}


/* Burger Nav Styling */

#sidebar-btn {
  vertical-align: middle;
  width: 40px;
  height: 25px;
  cursor: pointer;
  margin: 10px;
  position: relative;
  top: 4px;
}

#sidebar-btn span {
  height: 2px;
  background: black;
  margin-bottom: 5px;
  display: block;
}

#sidebar-btn span:nth-child(2) {
  width: 75%;
}

#sidebar-btn span:nth-child(3) {
  width: 50%;
}


/* Main Menu */

.main-navigation {}

.fa-caret-down {
  color: #fff;
}

.menu-test-container {
  position: absolute;
  top: 145px;
  left: 0;
  z-index: 100;
  width: 100%;
  background-color: black;
}

.main-navigation .menu.toggle-on {
  display: block;
}

.main-navigation ul {
  display: none;
  position: relative;
}

.main-navigation ul li {
  border-bottom: 1px solid silver;
  padding: 20px;
}

@media screen and (min-width: 768px) {
  .main-navigation ul li {
    padding: 15px;
  }
}

@media screen and (min-width: 900px) {
  .main-navigation ul li {
    padding: 20px;
  }
}

.main-navigation ul li a {
  color: #fff;
  text-decoration: none;
}

@media screen and (max-width: 467px) {
  .main-navigation ul li:hover {
    background-color: none;
  }
  .main-navigation ul ul li {
    border-bottom: none;
  }
}

@media screen and (min-width: 468px) {
  .main-navigation ul li:hover {
    background-color: #ffcc33;
  }
}


/* SUB Menu styles */

.sub-menu.toggle-on {
  display: block;
}

.main-navigation ul,
.main-navigation ul ul,
.main-navigation ul ul ul {
  list-style: none;
  display: none;
  margin-left: 0;
  padding-left: 0;
}


/* Positioning x y of EACH sub menus */

.main-navigation ul ul {
  position: relative;
  left: 0;
  top: 10px;
  min-width: 200px;
  background-color: black;
}

.main-navigation ul ul li:hover,
.main-navigation ul ul li:focus {
  background-color: black;
}

@media screen and (min-width: 468px) {
  .main-navigation ul ul {
    position: relative;
    left: 0;
    top: 75px;
    min-width: 200px;
    background-color: #0c7cbc;
  }
  .main-navigation ul ul li:hover {
    background-color: #ffcc33;
  }
}

.main-navigation ul ul ul {
  left: 150px;
  top: 0;
  background-color: inherit;
}

.main-navigation ul ul ul ul {
  background-color: green;
  top: 20px;
  left: 0;
}

.main-navigation ul ul ul ul ul {
  background-color: black;
  top: 0px;
  left: 200px;
}

.main-navigation ul ul ul ul ul ul {
  background-color: silver;
  top: 0px;
  left: 200px;
}

@media only screen and (min-width: 468px) {
  .header-wrap {
    flex-direction: column;
    /*padding: 0 1rem;*/
  }
  .site-title {
    margin-bottom: 1rem;
  }
  /* Main Navigation - Getting rid of navburger */
  #sidebar-btn {
    display: none;
  }
  .menu-toggle {
    display: none;
  }
  .main-navigation .menu.toggle-on {
    display: flex;
    /*			background-color: blue;
*/
  }
  .main-navigation ul {
    display: flex;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    background-color: #0b80c3;
  }
  .menu-test-container {
    display: block;
    position: relative;
    top: 0;
  }
  /* end of */
  /* Sub menu navigation tablet */
  /* Positioning x y of EACH sub menus */
  .main-navigation ul ul {
    position: absolute;
  }
  .main-navigation ul ul li {
    padding: 7px 1px;
  }
  .main-navigation ul ul li a {
    font-size: 90%;
    padding: 10px 10px;
  }
  .main-navigation ul ul ul {
    left: 6.4rem;
    top: 5px;
  }
  .main-navigation ul ul ul ul {
    top: 35px;
    left: 0;
  }
  .main-navigation ul ul ul ul ul {
    top: 0px;
    left: 141px;
  }
  .main-navigation ul ul ul ul ul ul {
    top: 0px;
    left: 200px;
  }
}


/* TABLET MENU */

@media only screen and (min-width: 768px) {
  .header-wrap {
    flex-direction: row;
  }
  .site-title {
    margin-bottom: 0;
  }
  /* Main Navigation - Getting rid of navburger */
  #sidebar-btn {
    display: none;
  }
  .primary-toggle {
    display: none;
  }
  .main-navigation .menu.toggle-on {
    display: flex;
  }
  .main-navigation ul {
    display: flex;
    align-items: center;
    flex-direction: row;
    margin: 0;
    justify-content: space-between;
  }
  .menu-test-container {
    display: block;
    position: relative;
    top: 0;
  }
  /* end of HEADER */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="site-navigation" class="main-navigation">
  <button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><i class="fa fa-bars" aria-hidden="true"></i>
</button>
  <div class="menu-test-container">
    <ul id="primary-menu" class="menu">
      <li id="menu-item-2035" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children"><a href="http://localhost/wordpress/services/"><span data-hover="Services">Services</span></a>
        <ul class="sub-menu">
          <li id="menu-item-2076" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://localhost/wordpress/project/"><span data-hover="Commercial">Commercial</span></a></li>
        </ul>
      </li>
      <li id="menu-item-2082" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children"><a href="http://localhost/wordpress/project/"><span data-hover="Rural">Rural</span></a>
        <ul class="sub-menu toggle-on">
          <li id="menu-item-2079" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://localhost/wordpress/gallery/"><span data-hover="Residential">Residential</span></a></li>
        </ul>
      </li>
      <li id="menu-item-2084" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://localhost/wordpress/project/"><span data-hover="Projects">Projects</span></a></li>
      <li id="menu-item-2045" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children"><a href="http://localhost/wordpress/blog/"><span data-hover="Blog">Blog</span></a>
        <ul class="sub-menu">
          <li id="menu-item-2081" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://localhost/wordpress/services/"><span data-hover="Electrical">Electrical</span></a></li>
        </ul>
      </li>
      <li id="menu-item-2078" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children"><a href="http://localhost/wordpress/news-updates/"><span data-hover="About">About</span></a>
        <ul class="sub-menu">
          <li id="menu-item-2099" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://localhost/wordpress/news-updates/"><span data-hover="News Updates">News Updates</span></a></li>
        </ul>
      </li>
    </ul>
  </div>
</nav>

最佳答案

将此插入代码:

ul li {
    position: relative;
}


				(function($) {
	

	/* NAVIGATION ON CLICK */
// Primary menu drop down (mobile)
$( ".dropdown-toggle" ).click(function() {
	$(this).parent().find(".sub-menu:first" ).toggleClass("toggle-on");
  });


/* NAVIGATION ON HOVER */
// Sub menu drop down 
 // $(".main-navigation ul li.menu-item-has-children").hover(function() {
 // 	$(this).find(".sub-menu:first").toggleClass("toggle-on");
 // });

var menu_timeout;

$(".main-navigation ul li.menu-item-has-children").hover(
  function(){  // Mouseenter
    var that = $(this);
    that.find(".sub-menu:first").addClass("toggle-on");
    clearTimeout(menu_timeout);
  },
  function(){  // Mouseleave
    var that = $(this);
      that.find(".sub-menu:first").removeClass("toggle-on");
  }
);

/* submenu click mobil version */
$(".menu-toggle").click(function() {
 	$(" .main-navigation ul:first").toggleClass("toggle-on");
});

// $(".main-navigation li.menu-item-has-children").mouseleave(function() {
//   $(".sub-menu").removeClass("toggle-on");
// });



	
})( jQuery );
	 *, html {
	 	margin: 0;
	 	font-size: 22px;
	 }
	 .site-header {
	 	width: 100%;
	 	/*min-height: 99px;*/
	   	background-color: #0b80c3;
	   	z-index: 100;
	 }
	 .header-wrap {
	 	display: flex;
	 	justify-content: space-between;
	  	align-items: center;
 	  	padding: 0 20px;
	   	width: 100%;    
		max-width: 1920px;
		margin:auto;
	 }

	 @media screen and (min-width: 1024px) {
	 	.site-header {
	 		position: fixed;
	 	}

	 	.header-wrap {
		    top: 0;
		    left:0;
		    right: 0;
		    width: 100%;
		    margin: 0 auto;
	 	}

	 	.site-branding {
	 		margin-left: 2.5rem;
	 	}
	 }
	 @media screen and (min-width: 1922px) {
	 	.header-wrap {

    		left:0;

	 	}
	 }

	/* Burger Nav Styling */
	#sidebar-btn {
	 	vertical-align: middle;
	 	width: 40px;
		height: 25px;
		cursor: pointer;
		margin:10px;
	 	position: relative;
		top: 4px;
		
	}
	#sidebar-btn span {
		height: 2px;
		background: black;
		margin-bottom: 5px;
		display: block;
	}
	#sidebar-btn span:nth-child(2) {
		width: 75%;
	}
	#sidebar-btn span:nth-child(3) {
		width: 50%;
	}


	 /* Main Menu */
	 .main-navigation {
	 }

	  .fa-caret-down {
	 	color: #fff;
	 }

	.menu-test-container {
		position: absolute;
		top: 145px;
		left: 0;
		z-index: 100;
		width: 100%;
		background-color: black;

	}
	.main-navigation .menu.toggle-on {
		display: block;
	}

	 .main-navigation ul {
	 	display: none;
	 		 	position: relative;

	  }

		.main-navigation ul li  {
			border-bottom: 1px solid silver;
			padding: 20px; 
		}


		@media screen and (min-width: 768px) {
			.main-navigation ul li  {
				padding: 15px;
			}

		}

		@media screen and (min-width: 900px) {
			.main-navigation ul li  {
				padding: 20px;

			}
		}
			 .main-navigation ul li a {
			 	color: #fff;
 			 	text-decoration: none;

			 }


		@media screen and (max-width: 467px) {
			
			.main-navigation ul li:hover {
			 	background-color: none;
			}
			.main-navigation ul ul li {
				border-bottom: none;
			}

		}
		
		@media screen and (min-width: 468px ) {
			.main-navigation ul li:hover {
			 	background-color: #ffcc33;
			}				
		}

	/* SUB Menu styles */
	 .sub-menu.toggle-on {
	 	display: block;	
	 }

	 .main-navigation ul, .main-navigation ul ul, .main-navigation ul ul ul  {
	 	list-style: none;
	 	display: none;

	 	   margin-left:0;
	    padding-left:0;
	 }

	/* Positioning x y of EACH sub menus */
	.main-navigation ul ul {
	  	position: relative;
	  	left: 0;
	  	top: 10px;
	  	min-width: 200px;	  	
	  	background-color: black;
	 }		
	 .main-navigation ul ul li:hover, .main-navigation ul ul li:focus  {
	   		background-color: black;
	 }	

	@media screen and (min-width: 468px ) {
		.main-navigation ul ul {
		  	position: relative;
		  	left: 0;
		  	top: 75px;
		  	min-width: 200px;
		  	
		  	background-color: #0c7cbc;
	   }
	   .main-navigation ul ul li:hover  {
	   	background-color: #ffcc33;
	   }


	}


	  .main-navigation ul  ul ul {
	  	left: 150px;
	  	top: 0;
	  	background-color: inherit;
	   }

	   .main-navigation ul ul ul ul {
	   	background-color: green;
	   	top: 20px;
	   	left: 0;
	   }
	   .main-navigation ul ul ul ul ul {
	   	background-color: black;		
	   	top:0px;
	   	left: 200px;
	  }
	    .main-navigation ul ul ul ul ul ul {
	   	background-color: silver;		
	   	top:0px;
	   	left: 200px;
	  }

	@media  only screen and (min-width: 468px) {
	.header-wrap {
		flex-direction: column;
		/*padding: 0 1rem;*/
 	}

 		.site-title {
			margin-bottom: 1rem;
		}
		/* Main Navigation - Getting rid of navburger */
		#sidebar-btn {
			display: none;
		}

		.menu-toggle {
			display: none;
		}

		.main-navigation .menu.toggle-on {
			display: flex;
/*			background-color: blue;
*/		}
		.main-navigation  ul {
			display: flex;
			align-items: center;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: space-between;
			background-color: #0b80c3;
		}

		ul li {
			position: relative;
		}

		.menu-test-container {
			display: block;
			position: relative;
			top: 0;
		}	/* end of */

	 	 	/* Sub menu navigation tablet */
	 	/* Positioning x y of EACH sub menus */
		  .main-navigation ul ul {
		  	position: absolute;
	 	   }


		  		.main-navigation ul ul li {
		  			padding: 7px 1px;
		  		}

		  		.main-navigation ul ul li a {
		  			font-size: 90%;
		  				  	padding: 10px 10px;

		  		}

		  .main-navigation ul  ul ul {
		  	left: 6.4rem;
		  	top: 5px;
		   }

		   .main-navigation ul ul ul ul {
		   	top: 35px;
		   	left: 0;
		   }
		   .main-navigation ul ul ul ul ul {
		   	top:0px;
		   	left: 141px;
		  }
		    .main-navigation ul ul ul ul ul ul {
		   	top:0px;
		   	left: 200px;
		  }
	}

	 /* TABLET MENU */  
	@media  only screen and (min-width: 768px) {
		.header-wrap {
		flex-direction: row;

	}
		.site-title {
    		margin-bottom: 0;
		}
		
		/* Main Navigation - Getting rid of navburger */
		#sidebar-btn {
			display: none;
		}

		.primary-toggle {
			display: none;
		}

		.main-navigation .menu.toggle-on {
			display: flex;
		}
		.main-navigation  ul {
			display: flex;
			align-items: center;
			flex-direction: row;
			margin: 0;
			justify-content: space-between;
 
		}
		.menu-test-container {
			display: block;
			position: relative;
			top: 0;
		}	



		/* end of HEADER */
	 	


	}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="site-navigation" class="main-navigation">
				<button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><i class="fa fa-bars" aria-hidden="true"></i>
</button>
				<div class="menu-test-container"><ul id="primary-menu" class="menu"><li id="menu-item-2035" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children"><a href="http://localhost/wordpress/services/"><span data-hover="Services">Services</span></a>
<ul class="sub-menu">
	<li id="menu-item-2076" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://localhost/wordpress/project/"><span data-hover="Commercial">Commercial</span></a></li>
</ul>
</li>
<li id="menu-item-2082" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children"><a href="http://localhost/wordpress/project/"><span data-hover="Rural">Rural</span></a>
<ul class="sub-menu toggle-on">
	<li id="menu-item-2079" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://localhost/wordpress/gallery/"><span data-hover="Residential">Residential</span></a></li>
</ul>
</li>
<li id="menu-item-2084" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://localhost/wordpress/project/"><span data-hover="Projects">Projects</span></a></li>
<li id="menu-item-2045" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children"><a href="http://localhost/wordpress/blog/"><span data-hover="Blog">Blog</span></a>
<ul class="sub-menu">
	<li id="menu-item-2081" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://localhost/wordpress/services/"><span data-hover="Electrical">Electrical</span></a></li>
</ul>
</li>
<li id="menu-item-2078" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children"><a href="http://localhost/wordpress/news-updates/"><span data-hover="About">About</span></a>
<ul class="sub-menu">
	<li id="menu-item-2099" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://localhost/wordpress/news-updates/"><span data-hover="News Updates">News Updates</span></a></li>
</ul>
</li>
</ul></div>				
			</nav>

更新帖子:

像这样更改 mouse leave 事件:

  function(){  // Mouseleave
    var that = $(this);
      that.find(".sub-menu:first").removeClass("toggle-on");
  }

关于javascript - 将下拉菜单定位在其父级下，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48556309/

上一篇：javascript - 在使用 jQuery 打开时，将更多选项添加到选择下拉列表中

下一篇：html - 我如何获得标题的高度？

相关文章：

php - AJAX - codeigniter 中的 PHP 显示帖子并限制它们

javascript - AJAX完成后加载网页

javascript - contenteditable 中无法访问的空列表项

java - 立即重定向。为什么会这样呢？

javascript - 如何使用 ReSTLet 发送(编码)PNG 图像并使用 jQuery 接收(解码)它？

html - 在 css font-family 中使用 inherit 是否安全

javascript - 将文件上传到服务器后显示服务器响应

javascript - 发送 xhrPost 请求时 DOJO 'TypeError:Cannot read property ' style of null 错误响应

javascript - 在 Slick Carousel div 中使用背景图像(响应式)

javascript - HTML5/javascript X11 服务器？

©2024 IT工具网  联系我们