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

【问题标题】：How do I keep navigation dropdown menus to stay open while hovering?如何在悬停时保持导航下拉菜单保持打开状态？
【发布时间】：2017-06-26 16:42:19
【问题描述】：

我正在开发一个导航栏，我希望它具有响应性，并且可以打开并按住下拉菜单，直到我停止将鼠标悬停在它们上方。当我将鼠标悬停在导航列表项上时，它会显示其相应的下拉列表，但是我似乎无法让它保持显示状态。以下是我正在使用的代码：

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

【问题讨论】：

标签： jquery html drop-down-menu navigation navbar

【解决方案1】：

我做了一些看起来正确的事情，使用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>

【讨论】：