Javascript - 悬停时 Bootstrap 下拉菜单打开子菜单的所有菜单级别

Question

我已经有了 javascript 函数，可以很好地处理只有一个下拉菜单的下拉列表项，但是当我有两个或菜单子(monad)菜单级别的下拉列表项时会出现问题，因为悬停时它会打开子菜单的所有菜单级别... 网站已上线，请查看- 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>

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