關閉多級jquery下拉菜單

我有一個下拉菜單擴大點擊而不是懸停。問題是，當我打開子菜單時，我無法讓它們關閉，因爲我將鼠標從當前子菜單移動到其父菜單。它應該隱藏上一級菜單一直到導航欄（頂部），並隱藏所有菜單，一旦我離開其任何子菜單並將鼠標懸停在頁面正文上方。關閉多級jquery下拉菜單

小提琴：http://jsfiddle.net/WjE9y/11/

HTML：

<!-- <LINK REL="SHORTCUT ICON" HREF="favicon.ico"> --> 
<!DOCTYPE html> 
<html> 
<head> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
    <script type="text/javascript" src="includes/menu.js"></script></script> 
    <link type="text/css" href="includes/menu.css" rel="stylesheet" /> 
</head> 
<body> 
    <div style="z-index:100;width:100%;position:fixed;top:0;left: 0;min-width:1000px;"> 
     <div id="menuJQ"> 
      <ul class="menuJQ"> 
       <li class="parent"><a href="#"><span>Home</span></a></li> 
       <li><a class="parent" href="#"><span>Product View</span></a> 
        <div> 
         <ul> 
          <li><a href="#"><span>DevTask Search</span></a></li> 
          <li><a href="#"><span>Active Machines</span></a></li> 
         </ul> 
        </div> 
       </li> 
       <li class="parent"><a href="#"><span>Request Tool</span></a></li> 
       <li><a href="#" class="parent"><span>Search</span></a> 
        <div> 
         <ul> 
          <li><a href="#"><span>DevTask Search</span></a></li> 
          <li><a href="#"><span>Active Machines</span></a></li> 
          <li><a href="#"><span>Integrity Query</span></a></li> 
          <li><a href="#"><span>Internal DevTasks</span></a></li> 
          <li><a href="#" class="parent"><span>Results</span></a> 
           <div> 
            <ul> 
             <li><a href="#" target='_blank'><span>Latest Smoke Results</span></a></li> 
             <li><a href="#" target='_blank'><span>Latest Smoke Results</span></a> 
              <div> 
               <ul> 
                <li><a href="#"><span>DevTask Search</span></a></li> 
                <li><a href="#"><span>Active Machines</span></a></li> 
                <li><a href="#"><span>Integrity Query</span></a></li> 
               </ul> 
              </div> 
             </li> 
            </ul> 
           </div> 
          </li> 
          <li><a href="#"><span>Issues for Stability Team</span></a></li> 
         </ul> 
        </div> 
       </li> 
      </ul> 
     </div> 
    </div> 
</body> 
</html>

JS：

$(document).ready(function(){ 
    $(function() { 
      $('#menuJQ > ul li').click(function(e) { 
       e.preventDefault(); 
       $('ul:first', this).show(); 
      }); 
     }); 

    var submenu_active = false; 
    $('#menuJQ ul').mouseenter(function() { 
     submenu_active = true;  
    }); 

    $('#menuJQ ul').mouseleave(function() { 
     submenu_active = false; 
     setTimeout(function() { 
      if (submenu_active === false) $('ul', this).hide("fast");}); 
    }); 
});

來源

2013-02-14 B3st0fth3w0rst

不妨重新創建jsFiddle中的示例，併發佈一個鏈接，因爲我們看不到它在這裏的樣子。 – 2013-02-14 06:53:32

@Samuel Liew小提琴添加。我改變了顏色，現在更容易看到。 – B3st0fth3w0rst 2013-02-14 07:16:10

我會給任何包含子類像submenu的div S：

... 
<li><a href="#" class="parent"><span>Search</span></a> 
    <div id="submenu"> 
     <ul> 
      ...

然後，你可以做這樣的事情：

$(document).ready(function(){ 
    $(function() { 
      $('#menuJQ > ul li').click(function(e) { 
       e.preventDefault(); 
       $('ul:first', this).show(); 
      }); 
     }); 

    $('.submenu').mouseleave(function() { 
     $('ul', this).hide("fast"); 
    }); 
});

Fiddle here。

來源

2013-02-14 08:46:48 mccannf

完美！感謝大家！ stackoverflow ftw。感謝@ mccannf您的解決方案完美運行。 – B3st0fth3w0rst 2013-02-14 15:48:08

關閉多級jquery下拉菜單

回答

相關問題