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