試圖讓與Magento jQuery懸停下拉

我想創建一個在Magento導航欄上的下拉菜單。正如你將在我的代碼中看到的所有下拉菜單的崩潰，當我懸停在列表項目之一。但我無法弄清楚如何在沒有爲每個鋰製造一個懸浮功能的情況下只出現正確的一個，這似乎是一種無效的方式來達到我的目標。試圖讓與Magento jQuery懸停下拉

，所以我希望你們能幫助我:)

這是我到目前爲止有：

HTML：

<div class="navigation-bar"> 
<ul class="mainLevel"> 
    <li class="navLink mainCategory1"><a href="http://fabriqmagento.development.cream.nl/new-in.html" class="level-top"><span>New in</span></a></li> 
    <li class="listSeperator">|</li> 
    <li class="navLink mainCategory2"><a href="http://fabriqmagento.development.cream.nl/merken.html" class="level-top"><span>Merken</span></a> 
     <ul class="level0"> 
      <li class="navLink mainCategory1"><a href="http://fabriqmagento.development.cream.nl/merken/diesel.html"><span>Diesel</span></a></li> 
      <li class="listSeperator"></li> 
      <li class="navLink mainCategory2"><a href="http://fabriqmagento.development.cream.nl/merken/becksondergaard.html"><span>Becksondergaard</span></a></li> 
      <li class="listSeperator"></li> 
     </ul> 
    </li> 
    <li class="listSeperator">|</li> 
    <li class="navLink mainCategory3"><a href="http://fabriqmagento.development.cream.nl/categorie.html" class="level-top"><span>Categorie</span></a></li> 
    <li class="listSeperator">|</li> 
    <li class="navLink mainCategory4"><a href="http://fabriqmagento.development.cream.nl/tassen.html" class="level-top"><span>Tassen</span></a></li> 
    <li class="listSeperator">|</li> 
    <li class="navLink mainCategory5"><a href="http://fabriqmagento.development.cream.nl/accessoires.html" class="level-top"><span>Accessoires</span></a></li> 
    <li class="listSeperator">|</li> 
    <li class="navLink mainCategory6"><a href="http://fabriqmagento.development.cream.nl/jeans.html" class="level-top"><span>Jeans</span></a></li> 
    <li class="listSeperator">|</li> 
    <li class="navLink mainCategory7"><a href="http://fabriqmagento.development.cream.nl/outlet.html" class="level-top"><span>Outlet</span></a></li> 
    <li class="listSeperator">|</li> 
</ul> 
</div>

CSS：

ul.level0{ display:none;}

jQuery：

(function(window, $, undefined) { 

    jQuery(function(){ 
     $('li.navLink').hover(function(){ 
      $('ul.level0').show(); 
     }, function(){ 
      $('ul.level0').hide(); 
     }) 
    }); 

})(window, jQuery);

來源

2012-10-10 Weszzz7

你只需要一對夫婦更改腳本...

http://jsfiddle.net/8846T/

(function($) { 

    jQuery(function(){ 
     $('li.navLink').hover(function(){ 
      $('ul.level0').hide(); 
      $(this).find('ul.level0').show(); 
     }, function(){ 
      $('ul.level0').hide(); 
     }) 
    }); 

})(jQuery);

我把它隱藏所有LEVEL0懸停UI元素，然後顯示孩子0級的UI元素徘徊李。

我也刪除代碼一點點從你的函數調用，因爲它並不需要:)

來源

2012-10-10 11:58:34 Archer

嗯，謝謝工程:) – Weszzz7

這是我的榮幸:) – Archer

試圖讓與Magento jQuery懸停下拉

回答

相關問題