Question

我有一个下拉菜单，当鼠标悬停在父元素上时，菜单主体现在会出现。我只想在鼠标离开菜单头或鼠标离开菜单主体时隐藏菜单主体，但到目前为止我能得到什么就是，当鼠标离开菜单头时，任一主体都会消失，这将使用户无法从菜单主体中进行选择

$(document).on("mouseover", '.menu-head', function() {
  $(this).find('a').addClass('filter-hover');
  $(this).find('span').html("<i class='glyphicon glyphicon-menu-up' style='color:#aaa;'></i>");
  $(".menu-body").show();
});

$(document).on("mouseleave", '.menu-body', function() {
  $('.menu-head').find('a').removeClass('filter-hover');
  $('.menu-head').find('span').html("<i class='glyphicon glyphicon-menu-down' style='color:#aaa;'></i>");
  $(".menu-body").hide();
});

.menu-body {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu-head">
  <ul class="attr-list">
    <li><a href="">Sole <span><i class="glyphicon glyphicon-menu-down "></i></span></a></li>
    <li><a href="">Sole Type <span><i class="glyphicon glyphicon-menu-down "></i></span></a></li>
    <li><a href="">Material <span><i class="glyphicon glyphicon-menu-down "></i></span></a></li>
  </ul>
</div>

<div class="menu-body">
  <div class="attr-name filter-list">
    <ul class="attr-list">
      <li><a href="">Rubber</a></li>
      <li><a href="">Rubber</a></li>
      <li><a href="">Rubber</a></li>
      <li><a href="">Rubber</a></li>
      <li><a href="">Rubber</a></li>
      <li><a href="">Rubber</a></li>
    </ul>
  </div>
</div>

js代码

first try...
$(function () {
        $('.menu-head').hover(function () {
            $(this).find('a').addClass('filter-hover');
            $(this).find('span').html("<i class='glyphicon glyphicon-menu-up' style='color:#aaa;'></i>");
            $(".menu-body").show();
            //alert('enter');
        }, function () {
            $(this).find('a').removeClass('filter-hover');
            $(this).find('span').html("<i class='glyphicon glyphicon-menu-down' style='color:#aaa;'></i>");
            $(".menu-body").hide();
        });
    });

第一次尝试在鼠标不在菜单头中时隐藏菜单主体，因此无法从菜单主体中进行选择

second try...
$(document).on("mouseover", '.menu-head',function(){
        $(this).find('a').addClass('filter-hover');
        $(this).find('span').html("<i class='glyphicon glyphicon-menu-up' style='color:#aaa;'></i>");
        $(".menu-body").show();
    });

    $(document).on("mouseleave", '.menu-body,function(){
        $('.menu-head').find('a').removeClass('filter-hover');
        $('.menu-head').find('span').html("<i class='glyphicon glyphicon-menu-down' style='color:#aaa;'></i>");
        $(".menu-body").hide();
    });

第二次尝试将鼠标悬停在菜单头上方时显示菜单主体，但仅在鼠标离开菜单头时隐藏菜单主体，因此，当鼠标离开菜单头而不输入菜单主体时，它们= n菜单主体将表现出来，我该如何进行这项工作，希望我的问题很清楚，谢谢您的帮助

我添加了这个小提琴以清楚地说明我想要的内容，JS FIDDLE，我们可以看到，当我们将鼠标悬停在主菜单上时，会出现子菜单，但只有当我们将鼠标悬停在子菜单上时，它才会消失。将鼠标悬停在子菜单上

Answer 1

通过将这两个部分包装在一个容器中并基于该父容器触发隐藏/显示行为，您无需检查任何复杂的状态。实际上，您可以将菜单头中的$(document).on('mouseenter mouseleave', '.menu', function(event) { $(this).children('.menu-body').stop().toggle(event.type === 'mouseenter'); });元素用作包装器，因为它们可以包含链接和子菜单。

.menu-body {
  display: none;
  position: absolute;
  min-width: 160px;
  background: white;
  border: 1px solid gray;
}

.menu-head>ul>li {
  display: inline-block;
  position: relative;
  padding: 10px;
}

ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="menu-head">
  <ul class="attr-list">
    <li class="menu">
      <a href="">Sole <span><i class="glyphicon glyphicon-menu-down "></i></span></a>
      <div class="menu-body">
        <div class="attr-name filter-list">
          <ul class="attr-list">
            <li><a href="">Sole Menu Item</a></li>
            <li><a href="">Sole Menu Item</a></li>
            <li><a href="">Sole Menu Item</a></li>
            <li><a href="">Sole Menu Item</a></li>
            <li><a href="">Sole Menu Item</a></li>
            <li><a href="">Sole Menu Item</a></li>
          </ul>
        </div>
      </div>
    </li>
    <li class="menu">
      <a href="">Sole Type <span><i class="glyphicon glyphicon-menu-down "></i></span></a>
      <div class="menu-body">
        <div class="attr-name filter-list">
          <ul class="attr-list">
            <li><a href="">Sole Type Menu Item</a></li>
            <li><a href="">Sole Type Menu Item</a></li>
            <li><a href="">Sole Type Menu Item</a></li>
          </ul>
        </div>
      </div>
    </li>
    <li class="menu">
      <a href="">Material <span><i class="glyphicon glyphicon-menu-down "></i></span></a>
      <div class="menu-body">
        <div class="attr-name filter-list">
          <ul class="attr-list">
            <li><a href="">Material Menu Item</a></li>
            <li><a href="">Material Menu Item</a></li>
            <li><a href="">Material Menu Item</a></li>
            <li><a href="">Material Menu Item</a></li>
            <li><a href="">Material Menu Item</a></li>
          </ul>
        </div>
      </div>
    </li>
  </ul>
</div>

</div>

{{1}}

当鼠标不再位于菜单头或菜单主体上方时隐藏菜单

1 个答案: