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

はこのようウルマークアップを変更しようとする私のNAVです：

<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>