如何使用Jquery顯示下拉菜單？

Question

我正在使用jQuery顯示下拉菜單。 它適用於單個菜單並顯示適當的下拉菜單。 如果我使用了多個菜單，它將顯示所有下拉菜單。 我知道，我在jQuery中傳遞了相同的類，但是如何在多個菜單中使用相同的類。 可能嗎？

請檢查我的代碼段中的輸出。 如果我將hover在Menu-1上，則它還會顯示Menu-2和Menu-3下拉菜單。 懸停時我必須顯示單個下拉列表。 可以幫我使用jQuery嗎？

這是我的片段：

 $(function() { $(".menu").hover( function() { $(".sub").slideToggle(400); }, function() { $(".sub").hide(); } ); }); 

 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; } 

 <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> 

Answer 1

您應該使用$(this)分別定位每個元素。 喜歡：

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

在結束.menu之前添加<div class="clear"> ，並.menu應用clear: both CSS規則：

HTML：

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

CSS：

.clear {
  clear: both;
}

看看下面的代碼片段：

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

 .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; } 

 <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> 

希望這可以幫助！