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

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事件来触发子导航节目......
而.show()代替.toggle()。

＆＃13;

＆＃13;

(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);

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;