2012-07-04 183 views
0

我有一個jquery下拉菜單,它的效果很好。 只有1個問題它幻燈片2個元素,但我只想要下拉我懸停的元素。jquery下拉菜單雙下拉列表

鏈接到網站:HERE

jQuery的

$(document).ready(function() { 

     $('.sub_menu').hide(); //hiding the element 

     $('.trigger').mouseenter(function() { 
      $('.sub_menu').slideDown(350); 
     }).mouseleave(function() { 
      $('.sub_menu').slideUp(350); 
     }); 
}); 

HTML

<div id="nav"> 
      <ul class="main_menu"> 
       <li><a href="#">Home</a></li> 
       <li class="trigger"> 
        <a href="#">Hypotheken</a> 
        <ul class="sub_menu"> 
         <li><a href="#">Hypotheekvormen</a></li> 
         <li><a href="#">Hyporheek rente</a></li> 
         <li><a href="#">Nationale hypotheek garantie</a></li> 
        </ul> 
        <div class="clear"></div>      
       </li> 
       <li><a href="#">Verzekeringen</a></li> 
       <li class="trigger"> 
        <a href="#">Downloads</a> 
        <ul class="sub_menu"> 
         <li><a href="#">Hypotheekvormen</a></li> 
         <li><a href="#">Hyporheek rente</a></li> 
         <li><a href="#">Nationale hypotheek garantie</a></li> 
        </ul> 
       </li> 
       <li><a href="#">Contact</a></li> 
      </ul> 
     </div><!-- nav --> 

回答

0

試試這個

$(document).ready(function() { 

     $('.sub_menu').hide(); //hiding the element 

     $('.trigger').mouseenter(function() { 
      $(this).children('.sub_menu').slideDown(350); 
     }).mouseleave(function() { 
      $(this).children('.sub_menu').slideUp(350); 
     }); 
}); 

在你的代碼,當你在一個菜單移動鼠標item所有具有類.sub_menu的元素都被選中並進行動畫處理。但你只需要當前的孩子。

+0

Awsome它的作品! thhx – Julez

+0

你可以解釋發生了什麼請問我有點新jquery – Julez

+0

更新了一些解釋。是否有意義? –