ドロップダウンメガメニューのクラスの削除を遅らせる方法ブートストラップ4？

Question

ナビゲーションバーのトグルでクラスを切り替えようとしていますが、マウスを移動するとすぐにクラスが削除され、メニューが非表示になります。私はそれが必要だと思うのは、クラスの削除だけでは遅れですが、クラスの表示はまだ瞬間かもしれません。ここでホバー問題https://i.imgur.com/o8ccCn9.gifv

のスクリーンショットは、トグルを書くためのマニュアルの方法がありますか？

Codepen：https://codepen.io/JacobLett/pen/jaaQYG?editors=0110

これは私が.hoverを考慮に子要素を取らないと思い

$(document).ready(function() { 
// executes when HTML-Document is loaded and DOM is ready 

    // when you hover a toggle show its dropdown menu 
    $(".navbar .dropdown-toggle").hover(function() { 
    $(this).parent().toggleClass("show"); 
    $(this).parent().find(".dropdown-menu").toggleClass("show"); 
    }); 

    // hide the menu when the mouse leaves the dropdown 
    $(".navbar .dropdown-menu").mouseleave(function() { 
    $(this).removeClass("show"); 
    }); 

// document ready 
}); 

これまでのアップデートスクリプトです。それは私のコードが動作した場合。だから、私はmouseenterとmouseleaveを試しましたが、ドロップダウンは絶対位置であるため、これでも動作しません。

Answer 1

[OK]を使用することができますあなたがアンカートリガーとメニュー自体の間の隙間に乗っているときに壊れないようにしてください。

だから私は同じ私のスクリプトを保持だけで、デスクトップの幅にそれを発射してからホバーギャップを削除するには、私のCSSを調整しました。

最終解決：https://codepen.io/JacobLett/pen/jaaQYG

HTML

<nav class="navbar navbar-expand-lg navbar-dark bg-primary"> 
    <a class="navbar-brand" href="#">Mega Dropdown</a> 
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> 
    <span class="navbar-toggler-icon"></span> 
    </button> 

    <div class="collapse navbar-collapse" id="navbarSupportedContent"> 
    <ul class="navbar-nav mr-auto"> 
     <li class="nav-item"> 
     <a class="nav-link" href="#">Category</a> 
     </li> 
     <li class="nav-item dropdown"> 
     <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
      Category 1 
     </a> 
     <div class="dropdown-menu" aria-labelledby="navbarDropdown"> 


      <div class="container"> 
      <div class="row"> 
       <div class="col-md-4"> 
       <ul class="nav flex-column"> 
       <li class="nav-item"> 
        <a class="nav-link active" href="#">Active</a> 
       </li> 
       <li class="nav-item"> 
        <a class="nav-link" href="#">Link item</a> 
       </li> 
       <li class="nav-item"> 
        <a class="nav-link" href="#">Link item</a> 
       </li> 
       </ul> 
       </div> 
       <!-- /.col-md-4 --> 
       <div class="col-md-4"> 
       <ul class="nav flex-column"> 
       <li class="nav-item"> 
        <a class="nav-link active" href="#">Active</a> 
       </li> 
       <li class="nav-item"> 
        <a class="nav-link" href="#">Link item</a> 
       </li> 
       <li class="nav-item"> 
        <a class="nav-link" href="#">Link item</a> 
       </li> 
       </ul> 
       </div> 
       <!-- /.col-md-4 --> 
       <div class="col-md-4"> 
       <a href=""> 
        <img src="https://dummyimage.com/200x100/ccc/000&text=image+link" alt="" class="img-fluid"> 
       </a> 
       <p class="text-white">Short image call to action</p> 

       </div> 
       <!-- /.col-md-4 --> 
      </div> 
      </div> 
      <!-- /.container --> 


     </div> 
     </li> 
     <li class="nav-item dropdown"> 
     <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
      Category 2 
     </a> 
     <div class="dropdown-menu" aria-labelledby="navbarDropdown"> 


      <div class="container"> 
      <div class="row"> 
       <div class="col-md-4"> 
       <ul class="nav flex-column"> 
       <li class="nav-item"> 
        <a class="nav-link active" href="#">Active</a> 
       </li> 
       <li class="nav-item"> 
        <a class="nav-link" href="#">Link item</a> 
       </li> 
       <li class="nav-item"> 
        <a class="nav-link" href="#">Link item</a> 
       </li> 
       </ul> 
       </div> 
       <!-- /.col-md-4 --> 
       <div class="col-md-4"> 
       <ul class="nav flex-column"> 
       <li class="nav-item"> 
        <a class="nav-link active" href="#">Active</a> 
       </li> 
       <li class="nav-item"> 
        <a class="nav-link" href="#">Link item</a> 
       </li> 
       <li class="nav-item"> 
        <a class="nav-link" href="#">Link item</a> 
       </li> 
       </ul> 
       </div> 
       <!-- /.col-md-4 --> 
       <div class="col-md-4"> 
       <a href=""> 
        <img src="https://dummyimage.com/200x100/ccc/000&text=image+link" alt="" class="img-fluid"> 
       </a> 
       <p class="text-white">Short image call to action</p> 

       </div> 
       <!-- /.col-md-4 --> 
      </div> 
      </div> 
      <!-- /.container --> 


     </div> 
     </li> 
     <li class="nav-item dropdown"> 
     <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
      Category 3 
     </a> 
     <div class="dropdown-menu" aria-labelledby="navbarDropdown"> 


      <div class="container"> 
      <div class="row"> 
       <div class="col-md-4"> 
       <ul class="nav flex-column"> 
       <li class="nav-item"> 
        <a class="nav-link active" href="#">Active</a> 
       </li> 
       <li class="nav-item"> 
        <a class="nav-link" href="#">Link item</a> 
       </li> 
       <li class="nav-item"> 
        <a class="nav-link" href="#">Link item</a> 
       </li> 
       </ul> 
       </div> 
       <!-- /.col-md-4 --> 
       <div class="col-md-4"> 
       <ul class="nav flex-column"> 
       <li class="nav-item"> 
        <a class="nav-link active" href="#">Active</a> 
       </li> 
       <li class="nav-item"> 
        <a class="nav-link" href="#">Link item</a> 
       </li> 
       <li class="nav-item"> 
        <a class="nav-link" href="#">Link item</a> 
       </li> 
       </ul> 
       </div> 
       <!-- /.col-md-4 --> 
       <div class="col-md-4"> 

       <a href=""> 
        <img src="https://dummyimage.com/200x100/ccc/000&text=image+link" alt="" class="img-fluid"> 
       </a> 
       <p class="text-white">Short image call to action</p> 

       </div> 
       <!-- /.col-md-4 --> 
      </div> 
      </div> 
      <!-- /.container --> 


     </div> 
     </li> 

    </ul> 
    <form class="form-inline my-2 my-lg-0"> 
     <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> 
     <button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button> 
    </form> 
    </div> 


</nav> 

CSS

/* adds some margin below the link sets */ 
.navbar .dropdown-menu div[class*="col"] { 
    margin-bottom:1rem; 
} 

.navbar .dropdown-menu { 
    border:none; 
    background-color:#0060c8!important; 
} 

/* breakpoint and up - mega dropdown styles */ 
@media screen and (min-width: 992px) { 

    /* remove the padding from the navbar so the dropdown hover state is not broken */ 
.navbar { 
    padding-top:0px; 
    padding-bottom:0px; 
} 

/* remove the padding from the nav-item and add some margin to give some breathing room on hovers */ 
.navbar .nav-item { 
    padding:.5rem .5rem; 
    margin:0 .25rem; 
} 

/* makes the dropdown full width */ 
.navbar .dropdown {position:static;} 

.navbar .dropdown-menu { 
    width:100%; 
    left:0; 
    right:0; 
/* height of nav-item */ 
    top:45px; 
} 

    /* shows the dropdown menu on hover */ 
.navbar .dropdown:hover .dropdown-menu, .navbar .dropdown .dropdown-menu:hover { 
    display:block!important; 
} 

    .navbar .dropdown-menu { 
    border: 1px solid rgba(0,0,0,.15); 
    background-color: #fff; 
    } 

} 

JS

$(document).ready(function() { 
// executes when HTML-Document is loaded and DOM is ready 

// breakpoint and up 
$(window).resize(function(){ 
    if ($(window).width() >= 980){ 

     // when you hover a toggle show its dropdown menu 
     $(".navbar .dropdown-toggle").hover(function() { 
     $(this).parent().toggleClass("show"); 
     $(this).parent().find(".dropdown-menu").toggleClass("show"); 
     }); 

     // hide the menu when the mouse leaves the dropdown 
     $(".navbar .dropdown-menu").mouseleave(function() { 
     $(this).removeClass("show"); 
     }); 

     // do something here 
    } 
}); 



// document ready 
}); 

Answer 2

いくつかのJavaScriptのオプションを試した後、私はホバー状態が希望してあなたがいくつかのピクセルをドロップダウンメニューを上に移動だった古き良きsuckerfishメニューを思い出したあなたは、native JavaScript setTimeout() method ...

$(document).ready(function() { 
// executes when HTML-Document is loaded and DOM is ready 

    // when you hover a toggle show its dropdown menu 
    $(".navbar .dropdown-toggle").hover(function() { 
    $(this).parent().toggleClass("show"); 
    $(this).parent().find(".dropdown-menu").toggleClass("show"); 
    }); 

    // hide the menu when the mouse leaves the dropdown 
    $(".navbar .dropdown-menu").mouseleave(function() { 
    setTimeout(function() { 
     $(this).removeClass("show"); 
    }, 3000); // delay the removal of the 'show' class for 3 seconds 
    }); 

// document ready 
});