ホバー中にナビゲーションドロップダウンメニューを開いたままにするにはどうすればよいですか？

Question

私は応答したいと思っているナビゲーションバーに取り組んでいて、それらの上にマウスを置くのを止めるまで、開いて保持するドロップダウンを持っています。ナビゲーションリスト項目の上にマウスを置くと、対応するドロップダウンが表示されますが、表示されないようにすることはできません。以下は、私が働いているコードは次のとおりです。

(function($) { 
 
    $(function() { 
 

 
    $('nav ul li a:not(:only-child)').hover(function(e) { 
 
     $(this).siblings('.nav-dropdown').toggle(); 
 

 
    $('.nav-dropdown').not($(this).siblings()).hide(); 
 
     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);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav> 
 
     <div class="nav-mobile"><a id="nav-toggle" href="#!"><span></span></a></div> 
 
     <ul class="nav-list"> 
 

 
     <li> 
 
      <a href="#!">About Us</a> 
 
      <ul class="nav-dropdown"> 
 
      <li> 
 
       <a href="#!">History</a> 
 
      </li> 
 
      <li> 
 
       <a href="#!">Our Staff</a> 
 
      </li> 
 
      <li> 
 
       <a href="#!">Partners & Affiliates</a> 
 
      </li> 
 

 
      <li> 
 
       <a href="#!">Board of Directors</a> 
 
      </li> 
 
      </ul> 
 
     </li> 
 

 
     <li> 
 
      <a href="#!">Programs</a> 
 
      <ul class="nav-dropdown"> 
 
      <li> 
 
       <a href="#!">Admissions</a> 
 
      </li> 
 
      <li> 
 
       <a href="#!">Services</a> 
 
      </li> 
 
      <li> 
 
       <a href="#!">Core Programs</a> 
 
      </li> 
 
      <li> 
 
       <a href="#!">Alumni Success</a> 
 
      </li> 
 
      </ul> 
 
     </li> 
 

 
     <li> 
 
      <a href="#!">Support Us</a> 
 
      <ul class="nav-dropdown"> 
 
      <li> 
 
       <a href="#!">Donate</a> 
 
      </li> 
 
      <li> 
 
       <a href="#!">Volunteer</a> 
 
      </li> 
 
      <li> 
 
       <a href="#!">Partnership</a> 
 
      </li> 
 
      </ul> 
 
     </li> 
 

 
     </ul> 
 
    </nav>

Answer 1

私はサブのnavショーをトリガするmouseenterイベントを使用して、正しく見える何かを作った...
そして.show()の代わり.toggle() 。

(function($) { 
 
    $(function() { 
 

 
    $('nav ul li a:not(:only-child)').on("mouseenter",function(e) { 
 
     $(this).siblings('.nav-dropdown').show(); 
 

 
     $('.nav-dropdown').not($(this).siblings()).hide(); 
 
     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);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav> 
 
     <div class="nav-mobile"><a id="nav-toggle" href="#!"><span></span></a></div> 
 
     <ul class="nav-list"> 
 

 
     <li> 
 
      <a href="#!">About Us</a> 
 
      <ul class="nav-dropdown"> 
 
      <li> 
 
       <a href="#!">History</a> 
 
      </li> 
 
      <li> 
 
       <a href="#!">Our Staff</a> 
 
      </li> 
 
      <li> 
 
       <a href="#!">Partners & Affiliates</a> 
 
      </li> 
 

 
      <li> 
 
       <a href="#!">Board of Directors</a> 
 
      </li> 
 
      </ul> 
 
     </li> 
 

 
     <li> 
 
      <a href="#!">Programs</a> 
 
      <ul class="nav-dropdown"> 
 
      <li> 
 
       <a href="#!">Admissions</a> 
 
      </li> 
 
      <li> 
 
       <a href="#!">Services</a> 
 
      </li> 
 
      <li> 
 
       <a href="#!">Core Programs</a> 
 
      </li> 
 
      <li> 
 
       <a href="#!">Alumni Success</a> 
 
      </li> 
 
      </ul> 
 
     </li> 
 

 
     <li> 
 
      <a href="#!">Support Us</a> 
 
      <ul class="nav-dropdown"> 
 
      <li> 
 
       <a href="#!">Donate</a> 
 
      </li> 
 
      <li> 
 
       <a href="#!">Volunteer</a> 
 
      </li> 
 
      <li> 
 
       <a href="#!">Partnership</a> 
 
      </li> 
 
      </ul> 
 
     </li> 
 

 
     </ul> 
 
    </nav>