如果父母處於活動狀態，jQuery下拉菜單應該展開

Question

我在jQuery中做了一個簡單的下拉菜單。它工作正常。我有一個問題，但。

問題是，我需要保持活動頁面下拉展開在下面的例子中，具有.inpath父項的子菜單需要始終保持展開狀態。如果你將鼠標懸停在另一個菜單項上，它應該顯示相關的子頁面，並且當你將鼠標懸停在返回位置時顯示活動的子頁面。任何幫助非常appriciated :-)！

我的HTML：

<div id="menu"> 

      <ul> 

       <li><a href="">Hvem</a></li> 
       <li><a href="">Hvad</a> 
        <ul> 
        <li><a href="">Produkter</a></li> 
        <li><a href="">Leveringer</a></li> 
        </ul> 
       </li> 

       <li class="inpath"><a href="">Hvordan</a> 

        <ul> 

         <li><a href="">Reklame</a></li> 
         <li><a href="">PR</a></li> 
         <li><a href="">Websites</a></li> 
         <li><a href="">Illustrationer</a></li> 

        </ul> 

       </li> 
       <li class="last-item"><a href="">Sådan!</a></li> 

      </ul> 

      <div class="clear"><!--clearfix--></div> 

     </div> 

我的jQuery：

<script type="text/javascript"> 
     //mouseenter, mouseover, hover 
     // mouseleave, mouseout, 
    $(document).ready(function() { 
     $('#menu ul li ul').hide(); 
     $('#menu li').hover(
      function() { 
       //show its submenu 
       $('ul', this).slideDown(100); 

      }, 
      function() { 
       //hide its submenu 
       $('ul', this).slideUp(100);   
      } 
     ); 

    }); 

     </script> 

Answer 1

嘗試從原來的hide()和hover()去除.inpath。您還需要使用>（直接後代選擇器）進行更具體的選擇。

$(document).ready(function() { 
    $('#menu > ul > li:not(.inpath) ul').hide(); 
    $('#menu > ul > li:not(.inpath)').hover(

    function() { 
     $('ul', this).slideDown(100); 
     $('#menu li.inpath ul').hide(); 
    }, function() { 
     $('ul', this).slideUp(100); 
     $('#menu li.inpath ul').show(); 
    }); 
}); 

http://jsfiddle.net/MGkQC/7/