slideToggle下拉菜單沒有嵌套列表

所以我的問題是，我有一個主導航下的「產品」下拉菜單。我定位了下拉菜單，將其設置爲顯示：無，然後編寫jQuery以便在特定的LI懸停時滑動菜單。問題是，當我將鼠標懸停在「產品」LI上並試圖將鼠標懸停在下拉列表上時，它會消失，因爲我不再在該LI上徘徊。slideToggle下拉菜單沒有嵌套列表

你可能在想「只要做嵌套列表!!!!」。好吧，我不想。我有一些jQuery被應用於主導航，我不想影響下拉菜單。我只想要一種方法來確保當鼠標懸停在主LI或下拉UL上時，下拉是打開的，並且當鼠標懸停在下拉時，下拉是關閉的。

在我的代碼中，我嘗試過讓鼠標在下拉菜單UL中保持打開狀態，但是鼠標離開LI可能會勝過嗎？請幫助！下面是我的HTML和jQuery。

鏈接到整個頁面我的工作：http://heylush.net/driven/

HTML：

   <ul id="topnav"> 
        <li class="home"><a href="index.html">Home</a></li> 
        <li class="aboutus"><a href="#">About Us</a></li> 
        <li class="products" class="drop1"><a href="#">Products</a></li> 
        <li><a href="#">Industries</a></li> 
        <li><a href="#">News</a></li> 
        <li><a href="#">Partners</a></li> 
        <li><a href="#">Contact Us</a></li> 
       </ul><!--#topnav--> 
       <ul id="products-nav"> 
        <li><img src="images/nav-arrow.png" /><a href="#">Overview</a></li> 
        <li><img src="images/nav-arrow.png" /><a href="#">Roadside Assistance</a></li> 
        <li><img src="images/nav-arrow.png" /><a href="#">Tire &amp; Wheel</a></li> 
        <li><img src="images/nav-arrow.png" /><a href="#">Key Replacement</a></li> 
        <li><img src="images/nav-arrow.png" /><a href="#">Dent Repair</a></li> 
        <li><img src="images/nav-arrow.png" /><a href="#">Windshield Protection</a></li> 
       </ul><!--#products-nav-->

的jQuery：

 $(document).ready(function() { 
      $('ul#products-nav').css('display', 'none'); 
      $('li.products').mouseenter(function(){ 
       $('ul#products-nav').slideToggle('medium'); 
      }).mouseleave(function(){ 
       $('ul#products-nav').slideToggle('medium'); 
      }); 
      $('ul#products-nav').mouseenter(function(){ 
       $(this).css('display', 'block'); 
      }).mouseleave(function(){ 
       $(this).css('display', 'none'); 
      }); 
      $('ul#products-nav li').mouseenter(function(){ 
       $(this).children('img').replaceWith('<img src="images/hover-arrow.png" />'); 
       $(this).children('a').css('color', '#6da3e0'); 
      }).mouseleave(function(){ 
       $(this).children('img').replaceWith('<img src="images/nav-arrow.png" />'); 
       $(this).children('a').css('color', '#2160ac'); 
      }); 
     });

來源

2011-10-13 user993911

你可以發表這個[JS小提琴]（http://jsfiddle.net/）所以我們可以使用你當前的代碼？還有更多的事情在你的頁面上，而不僅僅是上面的jQuery。包括CSS和*所有* jQuery/JavaScript，所以我們可以看到什麼與什麼相互作用，以及可能影響其他所有內容的是什麼。 –

我居然把它弄大了。不過謝謝你！在未來，我會在發佈問題之前用我的代碼設置JS小提琴。 – user993911

您可以發佈您的解決方案（作爲答案）嗎？這樣，這個問題有助於未來幫助其他人解決類似的問題。 –

你應該把內裏您的產品的資產淨值UL，所以當鼠標將超過ul時，它將會停留在li上。

  <ul id="topnav"> 
       <li class="home"><a href="index.html">Home</a></li> 
       <li class="aboutus"><a href="#">About Us</a></li> 
       <li class="products" class="drop1"><a href="#">Products</a> 
        <ul id="products-nav" style="display:none"> 
         <li><img src="images/nav-arrow.png" /><a href="#">Overview</a></li> 
         <li><img src="images/nav-arrow.png" /><a href="#">Roadside Assistance</a></li> 
         <li><img src="images/nav-arrow.png" /><a href="#">Tire &amp; Wheel</a></li> 
         <li><img src="images/nav-arrow.png" /><a href="#">Key Replacement</a></li> 
         <li><img src="images/nav-arrow.png" /><a href="#">Dent Repair</a></li> 
        <li><img src="images/nav-arrow.png" /><a href="#">Windshield Protection</a></li> 
        </ul><!--#products-nav--> 
       </li> 
       <li><a href="#">Industries</a></li> 
       <li><a href="#">News</a></li> 
       <li><a href="#">Partners</a></li> 
       <li><a href="#">Contact Us</a></li> 
      </ul><!--#topnav-->

來源

2011-10-13 19:26:00 jcubic

slideToggle下拉菜單沒有嵌套列表

回答

相關問題