Question

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

使用一个下拉菜单级别的JavaScript工作正常

＆＃13;

// 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);
  });
});

＆＃13;

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

＆＃13;

但是这个

＆＃13;

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

＆＃13;

Answer 1

您需要使用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>

Answer 2

您只需编辑您的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/

Answer 3

您正在使用.find遍历菜单的所有后代。你只需要＆＃34;下一级＆＃34;根据你的评论，你应该使用.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/

Javascript - 悬停时自举下拉列表打开子菜单

3 个答案: