我如何保持导航下拉菜单在悬停时保持打开状态

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

我做了一些看起来正确的东西，使用 mouseenter事件触发子-NAV show ...
和.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>