Javascript - 悬停时的引导下拉菜单打开子菜单的所有菜单级别答案

【问题标题】：Javascript - Bootstrap dropdown on hover open all menu levels of submenuJavascript - 悬停时的引导下拉菜单打开子菜单的所有菜单级别
【发布时间】：2016-05-12 23:36:35
【问题描述】：

我已经有 javascript 函数可以很好地处理只有一个下拉菜单的下拉列表项，但是当我有两个或菜单子菜单级别的下拉列表项时会出现问题，因为在悬停时它会打开子菜单的所有菜单级别... 网站上线了，看看 - http://mile.x3.rs/mile/uram/

JavaScript 可在一级下拉菜单中正常工作

// MENU HOVER
$(document).ready(function() {
  $(".dropdown, .dropdown-active").hover(function() {
    $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
  }, function() {
    $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
  });
});

<li class="dropdown">
  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" title="Partneri">Partneri <i class="fa fa-angle-down"></i></a>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#" title="Partner 1">Partner 1</a>
    </li>
    <li><a href="#" title="Partner 2">Partner 2</a>
    </li>
    <li><a href="#" title="Partner 3">Partner 3</a>
    </li>
    <li><a href="#" title="Partner 4">Partner 4</a>
    </li>
    <li><a href="#" title="Partner 5">Partner 5</a>
    </li>
    <li><a href="#" title="Partner 6">Partner 6</a>
    </li>
  </ul>
</li>

但是这个

<li class="dropdown">
  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" title="Reference">Reference <i class="fa fa-angle-down"></i></a>
  <ul class="dropdown-menu">
    <li class="dropdown dropdown-submenu">
      <a href="#" title="Prehrambena industrija">Prehrambena industrija</a>
      <ul class="dropdown-menu">
        <li class="dropdown dropdown-submenu">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" title="Pivare">Pivare<i class="fa fa-angle-right"></i></a>
          <ul class="dropdown-menu">
            <li><a href="#">Option 1</a>
            </li>
            <li><a href="#">Option 2</a>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</li>

【问题讨论】：

请说明您是要打开所有子级别还是只打开悬停元素的直接子级。如前所述，您所需的功能尚不清楚。
如果我有前任。参考资料 -> 食品工业 -> 啤酒厂 -> 喜力工厂，悬停在参考资料上我只想打开下面的食品工业，然后将鼠标悬停在食品工业上，在右侧打开啤酒厂等。
注意时间，我发现fadein中的500值让菜单感觉有点迟钝。
感谢作为网站访问者的建议和反馈，非常感谢

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

你只需要编辑你的jquery代码就可以了。

$(document).ready(function() {
    $(".dropdown, .dropdown-active").hover(function() {
        $(this).find('.dropdown-menu').eq(0).stop(true, true).delay(200).fadeIn(500);
    }, function() {
        $(this).find('.dropdown-menu').eq(0).stop(true, true).delay(200).fadeOut(500);
    });
});

所以脚本只会在第一个元素上运行。 https://jsfiddle.net/IA7medd/63Lfgjnm/

【讨论】：

现在我注意到当我尝试在移动设备和平板电脑设备屏幕上打开下拉子菜单时，我的导航栏已折叠时出现问题。当我单击任何具有下拉菜单和下拉子菜单的列表项时，它的下拉子菜单不会打开。如何解决？
它不适用于触摸设备，因为在这些设备上，单击事件被视为悬停，因此当您进行第二次单击时，它会考虑将鼠标悬停在 li 上，以便淡出子菜单.为了解决这个问题，我们将首先检测设备，然后我制作了另一个仅在触摸设备上运行的脚本。你会在这里找到它：jsfiddle.net/IA7medd/63Lfgjnm/3 但我没有测试它，所以请尝试一下，如果你有任何问题，请告诉我
嗯，现在很奇怪的问题...首先点击li项（类下拉菜单），下拉菜单打开但立即消失。第二次单击相同的列表项（类下拉菜单），下拉菜单打开，但我定义了不同的 css 样式（不知道为什么）。第三次点击下拉子菜单，最后菜单看起来不错。现场示例 - mile.x3.rs/mile/uram

【解决方案2】：

您需要使用 jQuery 的 find() 选择元素的仅直接后代。

试试这个并注意 $(this).find('> .dropdown-menu')：

$(document).ready(function() {
  $(".dropdown, .dropdown-active").hover(function() {
    $(this).find('> .dropdown-menu').stop(true, true).delay(200).fadeIn(500);
  }, function() {
    $(this).find('> .dropdown-menu').stop(true, true).delay(200).fadeOut(500);
  });
});

这是完整的演示：

$(document).ready(function() {
  $(".dropdown, .dropdown-active").hover(function() {
    $(this).find('> .dropdown-menu').stop(true, true).delay(200).fadeIn(500);
  }, function() {
    $(this).find('> .dropdown-menu').stop(true, true).delay(200).fadeOut(500);
  });
});

<script src="//cdn.bootcss.com/jquery/2.1.0/jquery.js"></script>
<script src="//cdn.bootcss.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="//cdn.bootcss.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<link href="//cdn.bootcss.com/bootstrap/3.0.0/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="//cdn.bootcss.com/bootstrap/3.0.0/css/bootstrap-theme.css" rel="stylesheet" />

<div class="container">
  <header>
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" title="Reference">Reference <i class="fa fa-angle-down"></i></a>
      <ul class="dropdown-menu">
        <li class="dropdown dropdown-submenu">
          <a href="#" title="Prehrambena industrija">Prehrambena industrija</a>
          <ul class="dropdown-menu">
            <li class="dropdown dropdown-submenu">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" title="Pivare">Pivare<i class="fa fa-angle-right"></i></a>
              <ul class="dropdown-menu">
                <li><a href="#">Option 1</a>
                </li>
                <li><a href="#">Option 2</a>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </header>
</div>

【讨论】：

【解决方案3】：

您正在使用 .find 遍历菜单的所有后代。根据您的评论，您只需要“下一个级别”，因此您应该使用.children，因为它不会遍历到下一个级别。

$(document).ready(function() {
  $(".dropdown, .dropdown-active").hover(function() {
    $(this).children('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
  }, function() {
    $(this).children('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
  });
});

参考：https://api.jquery.com/children/

【讨论】：