如何創建使用jquery的全寬下拉菜單

Question

我想創建我的自定義全寬菜單使用簡單的懸停功能，但我的問題是儘快鼠標移出菜單的細分也隱藏。 你能用我的代碼幫我嗎？

這裏是我的導航

HTML

<ul class="nav navbar-nav"> 
    <li class="dropdown mega-dropdown" id="open-block-menu"> 
     <a href="about-flax" class="dropdown-toggle" data-toggle="dropdown">ONLINE STORE </a> 
    </li> 
</ul> 
<div class="top-block"> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-xs-12"> 
       <h1>HELLO WORLD</h1> 
      </div> 
     </div> 
    </div> 
</div> 

JS

$('#open-block-menu').hover(function() { 
     $('.top-block').slideDown(); 
    }, function() { 
     $('.top-block').slideUp(); 
}); 

Answer 1

代替hover方法，你可以使用mouseenter and mouseleave如下圖所示，所以每當mouseenters顯示在menus以下，並在mouse pointer leave下面的菜單再次隱藏。

$('#open-block-menu').on("mouseenter",function() { 
 
    $('.top-block').slideDown(); 
 
}); 
 
$('.top-block').on("mouseleave",function() { 
 
    $(this).slideUp(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="nav navbar-nav"> 
 
    <li class="dropdown mega-dropdown" id="open-block-menu"> 
 
     <a href="about-flax" class="dropdown-toggle" data-toggle="dropdown">ONLINE STORE </a> 
 
    </li> 
 
</ul> 
 
<div class="top-block"> 
 
    <div class="container"> 
 
     <div class="row"> 
 
      <div class="col-xs-12"> 
 
       <h1>HELLO WORLD</h1> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

Answer 2

試圖改變烏爾類似這樣的標記：

<ul class="nav navbar-nav"> 
    <li class="dropdown mega-dropdown" id="open-block-menu"> 
     <a href="about-flax" class="dropdown-toggle" data-toggle="dropdown">ONLINE STORE </a> 
     <div class="top-block"> 
      <div class="container"> 
       <div class="row"> 
        <div class="col-xs-12"> 
         <h1>HELLO WORLD</h1> 
        </div> 
       </div> 
      </div> 
     </div> 
    </li> 
</ul>