如何使用Jquery显示下拉菜单？

时间：2016-12-24 07:47:41

标签： javascript jquery html css drop-down-menu

我正在使用jQuery来显示下拉菜单。它适用于单个菜单并显示正确的下拉菜单。如果我使用多个菜单，则会显示所有下拉菜单。我知道，我在jQuery中传递了相同的类，但是如何在多个菜单中使用相同的类。可能吗？

请在代码段中查看我的输出。如果我在Menu-1上hover，那么它还会显示Menu-2和Menu-3下拉菜单。我必须在悬停时显示单个下拉菜单。你能用jQuery帮我吗？

这是我的代码：

＆＃13;
＆＃13; 
$(function() {
$(".menu").hover(
function() { $(".sub").slideToggle(400); },
function() { $(".sub").hide(); }
);
});
＆＃13; 
a{
text-decoration: none;
}

.menu{
font-family: Arial;
color: #515151;
position: relative;
background-color: #763E9B;
width: 100%;
color: #fff;
}
.menu ul.main-menu{
  list-style: none;
  float: right;
}

.menu li.main-list {
margin: 20px;
float: left;
}

.menu li a{
color: #515151;
display: block;
padding: 10px 15px;
cursor: pointer;
font-size: 14px;
}

.menu ul.sub-options li a:hover{
background: #f44141;
color: #fff;
/*margin: 20px;*/
}

.sub{
background: #fff;
position: absolute;
z-index: 2;
width: 200px;
padding: 10px 0 3px;
border-radius: 3px;
box-shadow: 0 2px 4px #ddd;
border: 1px solid #ddd;
display: none;
}

a.hover-link{

font-size: 14px;
color: #fff;
z-index: 110;
display: block;
padding: 10px 0 1px 10px;
cursor:pointer;
border-radius: 5px 5px 0 0;
font-weight: bold;

}
.sub-options{
list-style:none;
margin:0px;
padding:0px;
font-size: 11px;
}


.square:before {
     content: "";
  position: absolute;
  left: 50%;
  top: -10px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0;
  border-color: transparent transparent #fae0bb transparent;
  z-index: 9999;
  transform: translateX(-50%)
}
.square:after {
    content:"";
    position: absolute;
    right: 4px;
    top: -22px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 17px 17px 17px;
    border-color: transparent transparent #ffffff transparent;
    z-index:9998;
}
.square {
   background: #fae0bb;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
    position: absolute;
    margin: 0;
    /*top: 2.8em;*/
    width: 200px;
    z-index: 99999;
    margin-top: 20px;
}

.menu:hover .square:before{
  border-width: 0 10px 10px 10px;
}
＆＃13; 
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>

<div class='menu'>
<ul class="main-menu">
<li class="main-list"><a class='hover-link'>Menu 1</a>
<div class="square">
<div class='sub'>
<ul class='sub-options'>
<li><a href='#'>Home</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Services</a></li>
<li><a href='#'>Contact</a></li>
</ul>
</div>
</div>
</li>

<li class="main-list"><a class='hover-link'>Menu 2</a>

<div class="square">
<div class='sub'>
<ul class='sub-options'>
<li><a href='#'>Home</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Services</a></li>
<li><a href='#'>Contact</a></li>
</ul>
</div>
</div>
</li>

<li class="main-list"><a class='hover-link'>Menu 3</a>
<div class="square">

<div class='sub'>
<ul class='sub-options'>
<li><a href='#'>Home</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Services</a></li>
<li><a href='#'>Contact</a></li>
</ul>
</div>
</div>
</li>

</ul>

</div>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：4)

您应该使用$(this)单独定位每个元素。像：

$(function() {
  $(".main-list").hover(
    function() { $(this).find('.sub').slideToggle(400); },
    function() { $(this).find('.sub').hide(); }
  );
});

在结束<div class="clear">＆amp;之前添加.menu将clear: both CSS规则应用于它：

HTML：

<div class="menu">
  <ul>...<ul>
  <ul>...<ul>
  <div class="clear"></div>
</div>

CSS：

.clear {
  clear: both;
}

请看下面的代码段：

＆＃13;
＆＃13; 
$(function() {
  $(".main-list").hover(
    function() { $(this).find('.sub').slideToggle(400); },
    function() { $(this).find('.sub').hide(); }
  );
});
＆＃13; 
.clear {
  clear: both;
}

a{
	text-decoration: none;
}

.menu{
	font-family: Arial;
	color: #515151;
	position: relative;
	background-color: #763E9B;
	width: 100%;
	color: #fff;
}
.menu ul.main-menu{
	list-style: none;
	float: right;
}

.menu li.main-list {
	margin: 20px;
	float: left;
	position: relative;
}

.menu li a{
	color: #fff;
	display: block;
	padding: 10px 15px;
	cursor: pointer;
	font-size: 14px;
}

.menu ul.sub-options li a {
  color: #151515;
}

.menu ul.sub-options li a:hover{
	background: #f44141;
	color: #fff;
	/*margin: 20px;*/
}

.sub{
	background: #fff;
	position: absolute;
	z-index: 2;
	width: 200px;
	padding: 10px 0 3px;
	border-radius: 3px;
	box-shadow: 0 2px 4px #ddd;
	border: 1px solid #ddd;
	display: none;
}

a.hover-link{

	font-size: 14px;
	color: #fff;
	z-index: 110;
	display: block;
	padding: 10px 0 1px 10px;
	cursor:pointer;
	border-radius: 5px 5px 0 0;
	font-weight: bold;

}
.sub-options{
	list-style:none;
	margin:0px;
	padding:0px;
	font-size: 11px;
}


.square:before {
	content: "";
	position: absolute;
	left: 50%;
	top: -10px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0;
	border-color: transparent transparent #fae0bb transparent;
	z-index: 9999;
	transform: translateX(-50%)
}
.square:after {
	content:"";
	position: absolute;
	right: 4px;
	top: -22px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 17px 17px 17px;
	border-color: transparent transparent #ffffff transparent;
	z-index:9998;
}
.square {
	background: #fae0bb;
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
	position: absolute;
	margin: 0;
	left: 50%;
	transform: translateX(-50%);
	/*top: 2.8em;*/
	width: 200px;
	z-index: 99999;
	margin-top: 20px;
}

.main-list:hover .square:before{
	border-width: 0 10px 10px 10px;
}
＆＃13; 
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>

<div class='menu'>
	<ul class="main-menu">
		<li class="main-list"><a class='hover-link'>Menu 1</a>
			<div class="square">
				<div class='sub'>
					<ul class='sub-options'>
						<li><a href='#'>Home</a></li>
						<li><a href='#'>About</a></li>
						<li><a href='#'>Services</a></li>
						<li><a href='#'>Contact</a></li>
					</ul>
				</div>
			</div>
		</li>

		<li class="main-list"><a class='hover-link'>Menu 2</a>

			<div class="square">
				<div class='sub'>
					<ul class='sub-options'>
						<li><a href='#'>Home</a></li>
						<li><a href='#'>About</a></li>
						<li><a href='#'>Services</a></li>
						<li><a href='#'>Contact</a></li>
					</ul>
				</div>
			</div>
		</li>

		<li class="main-list"><a class='hover-link'>Menu 3</a>
			<div class="square">

				<div class='sub'>
					<ul class='sub-options'>
						<li><a href='#'>Home</a></li>
						<li><a href='#'>About</a></li>
						<li><a href='#'>Services</a></li>
						<li><a href='#'>Contact</a></li>
					</ul>
				</div>
			</div>
		</li>

	</ul>
  <div class="clear"></div>

</div>
＆＃13;
＆＃13;
＆＃13;

希望这有帮助！

相关问题
最新问题