如何创建使用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>