ホバーjqueryにサブメニューを開いたままにする

Question

私はホバー上で開いたままにしておきたいドロップダウンメニューを持っています。以前は.click（）を使用していましたが、開いたままにしておきましたが、コードを.hover（）に変更すると、マウスをトップリンクから離すとすぐに消えます。ここ が私のコードです：

<nav> 
      <div class="nav-mobile"> 
       <a id="nav-toggle" href="#"><span></span></a> 
      </div> 
      <ul class="nav-list"> 
       <li><a href="#">Solutions</a> 
        <ul class="nav-dropdown"> 
         <li><a href="#">Click & Collect</a></li> 
         <li><a href="#">Endless Aisle</a></li> 
         <li><a href="#">Ship from Store</a></li> 
         <li><a href="#">Partner Dropship</a></li> 
         <li><a href="#">In-Store Returns</a></li> 
         <li><a href="#">Fulfillment Optimization</a></li> 
        </ul> 
       </li> 
       <li><a href="#">The Way We Work</a> 
        <ul class="nav-dropdown"> 
         <li><a href="#">Software as a Service</a></li> 
         <li><a href="#">Delivering Best Practice</a></li> 
         <li><a href="#">Reusable Integrations</a></li> 
         <li><a href="#">Partner Collaboration</a></li> 
         <li><a href="#">Sharing Success</a></li> 
         <li><a href="#">Living Our Values</a></li> 
        </ul> 
       </li> 
       <li><a href="#"><img class="flag" src="assets/english.png" alt="">English</a> 
        <ul class="nav-dropdown"> 
         <li><a href="#"><img class="flag" src="assets/cantonese.png" alt="">Cantonese</a></li> 
         <li><a href="#"><img class="flag" src="assets/japanese.png" alt="">Japanese</a></li> 
         <li><a href="#"><img class="flag" src="assets/korean.png" alt="">Korean</a></li> 
         <li><a href="#"><img class="flag" src="assets/mandarin.png" alt="">Mandarin</a></li> 
        </ul> 
       </li> 
      </ul> 
     </nav> 

、ここでは私のjQueryのです：？ （

function($) { 
    $(function() { 
     $('nav ul li > a').not($('.only-child')).mouseenter(function(e){ 
      $(this).siblings('.nav-dropdown').slideToggle(); 
      $('.nav-dropdown').not($(this).siblings()).hide(); 
      e.stopPropagation(); 
     }); 
     $('nav ul li > a').not($('.only-child')).mouseleave(function(e) { 
      $(this).siblings('.nav-dropdown').slideToggle(); 
      e.stopPropagation(); 
     }) 
     $('html').click(function(){ 
      $('.nav-dropdown').hide(); 
     }); 

     $('#nav-toggle').click(function() { 
      $('nav ul').slideToggle(); 
     }); 

     $('#nav-toggle').on('click', function() { 
      this.classList.toggle('active'); 
     }); 

    }); 
})(jQuery); 

どのように私はそれはホバー上で動作させることができます

Answer 1

ホバーセレクターで間違いを犯しましたセレクタparent > childを使用してください。そして、マウスアウト効果を削除し、私は読みやすくするためにあなたのコードに変更を加え、このチェック：

$(".nav-dropdown").hide() 
 
$('nav > ul > li > a:not(.only-child)').mouseenter(function(e){ 
 
    $('.nav-dropdown').hide(); 
 
    $(this).next('.nav-dropdown').slideToggle(); 
 
    e.stopPropagation(); 
 
}); 
 
/*$('nav ul li > a:not(.only-child)').mouseleave(function(e) { 
 
    $(this).siblings('.nav-dropdown').slideToggle(); 
 
    e.stopPropagation(); 
 
})*/ 
 
$('html:not(.nav-dropdown)').click(function(){ 
 
    $('.nav-dropdown').hide(); 
 
}); 
 

 
$('#nav-toggle').click(function() { 
 
    $('nav ul').slideToggle(); 
 
}); 
 

 
$('#nav-toggle').on('click', function() { 
 
    this.classList.toggle('active'); 
 
});

.nav-list > li{ 
 
    border: 1px solid black; 
 
    width: 300px; 
 
}

<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
<!-- jQuery library --> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 

 
<!-- Latest compiled JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<nav> 
 
      <div class="nav-mobile"> 
 
       <a id="nav-toggle" href="#">Slide List under me<span></span></a> 
 
      </div> 
 
      <ul class="nav-list"> 
 
       <li> 
 
        <a id="test1" href="#">Solutions</a> 
 
        <ul class="nav-dropdown"> 
 
         <li><a href="#">Click & Collect</a></li> 
 
         <li><a href="#">Endless Aisle</a></li> 
 
         <li><a href="#">Ship from Store</a></li> 
 
         <li><a href="#">Partner Dropship</a></li> 
 
         <li><a href="#">In-Store Returns</a></li> 
 
         <li><a href="#">Fulfillment Optimization</a></li> 
 
        </ul> 
 
       </li> 
 
       <li><a href="#">The Way We Work</a> 
 
        <ul class="nav-dropdown"> 
 
         <li><a href="#">Software as a Service</a></li> 
 
         <li><a href="#">Delivering Best Practice</a></li> 
 
         <li><a href="#">Reusable Integrations</a></li> 
 
         <li><a href="#">Partner Collaboration</a></li> 
 
         <li><a href="#">Sharing Success</a></li> 
 
         <li><a href="#">Living Our Values</a></li> 
 
        </ul> 
 
       </li> 
 
       <li><a href="#"><img class="flag" src="assets/english.png" alt="">English</a> 
 
        <ul class="nav-dropdown"> 
 
         <li><a href="#"><img class="flag" src="assets/cantonese.png" alt="">Cantonese</a></li> 
 
         <li><a href="#"><img class="flag" src="assets/japanese.png" alt="">Japanese</a></li> 
 
         <li><a href="#"><img class="flag" src="assets/korean.png" alt="">Korean</a></li> 
 
         <li><a href="#"><img class="flag" src="assets/mandarin.png" alt="">Mandarin</a></li> 
 
        </ul> 
 
       </li> 
 
      </ul> 
 
     </nav>

Answer 2

このリンクhttps://stackoverflow.com/a/8447294/7643918をチェックし、Nutailは非常にうまく説明しましたマウス入力とマウス離脱イベントのコードを記述する必要があります。