Question

我有一个简单的大型菜单，如果用户将鼠标悬停在菜单项上或悬停在菜单项上，我会尝试保持子菜单（菜单外，而不是内部）。但是，当我离开悬停菜单项时，子菜单将隐藏。我尝试对菜单项和菜单外的子菜单使用2个悬停功能，但没有运气，子菜单仍然先滑动，然后再滑动。

如上所示，例如具有以下代码：

jQuery(document).ready(function() {
  var $ = jQuery;
  var _nav = $(".menu-wrapper li");
  var _nav_offset = _nav.offset();
  var _nav_height = _nav.outerHeight();
  var wST = $(window).scrollTop();

  $('#menu-dropdown').css({
    'top': _nav_offset.top - wST + _nav_height
  })

  $(".menu-wrapper li").hover(function() {
    $('#menu-dropdown').slideDown();
  }, function() {
    $('#menu-dropdown').slideUp();
  })

  $('#menu-dropdown').hover(function() {
    $('#menu-dropdown').slideDown();
  }, function() {
    $('#menu-dropdown').slideUp();
  })
})

#menu {
	position:relative;
	padding-top:10px;
	text-align:center;
}
#menu ul {
	display:block;
	background:#f5f5f5;
	line-height:60px;
}
#menu .menu-wrapper .menu-item {
	display:inline-block;
	padding:5px 20px;
	color:#111;
}
#menu-dropdown {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:auto;
	z-index:999;
	display:none;
}
.dropdown-content {
	background:#333;
	color:#fff;
	padding:20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu">
  <ul class="menu-wrapper">
    <li class="menu-item">Home</li>
    <li class="menu-item">About</li>
    <li class="menu-item">Contact</li>
  </ul>
</div>
<div id="menu-dropdown">
  <div class="dropdown-content">
    <p class="paragraph">Phoenix</p>
  </div>
</div>

有没有更好的方法呢？注意：我正在寻找菜单外的子菜单的答案

由于

Answer 1

这是一个可能的解决方案。您还可以在mouseenter/mouseleave函数中添加超时函数，以防止它们立即触发。

＆＃13;

jQuery(document).ready(function() {
      var $ = jQuery;
      var _nav = $(".menu-wrapper li");
      var _nav_offset = _nav.offset();
      var _nav_height = _nav.outerHeight();
      var wST = $(window).scrollTop();

      $('#menu-dropdown').css({
        'top': _nav_offset.top - wST + _nav_height
      })

      $(".menu-wrapper li").mouseenter(function() {
          $('#menu-dropdown').stop().slideDown();
      });
      
      $(".menu-wrapper li, #menu-dropdown").mouseleave(function() {
        if(!$('#menu-dropdown').is(':hover')){
          $('#menu-dropdown').slideUp();
        };
      });
});

＆＃13;

#menu {
    	position:relative;
    	padding-top:10px;
    	text-align:center;
    }
    #menu ul {
    	display:block;
    	background:#f5f5f5;
    	line-height:60px;
    }
    #menu .menu-wrapper .menu-item {
    	display:inline-block;
    	padding:5px 20px;
    	color:#111;
    }
    #menu-dropdown {
    	position:fixed;
    	top:0;
    	left:0;
    	width:100%;
    	height:auto;
    	z-index:999;
    	display:none;
    }
    .dropdown-content {
    	background:#333;
    	color:#fff;
    	padding:20px;
    }
    #test{
    margin-top:100px;
    }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <div id="menu">
      <ul class="menu-wrapper">
        <li class="menu-item">Home</li>
        <li class="menu-item">About</li>
        <li class="menu-item">Contact</li>
      </ul>
    </div>
    <div id="menu-dropdown">
      <div class="dropdown-content">
        <p class="paragraph">Phoenix</p>
      </div>
    </div>

＆＃13;

或者你可以在每个动作之前添加.stop()，如下所示：

  $(".menu-wrapper li").hover(function() {
    $('#menu-dropdown').stop().slideDown();
  }, function() {
    $('#menu-dropdown').stop().slideUp();
  })

  $('#menu-dropdown').hover(function() {
    $('#menu-dropdown').stop().slideDown();
  }, function() {
    $('#menu-dropdown').stop().slideUp();
  })

然而，这可以给出一个略微笨拙的动画（在我看来是至少）。

悬停时可以看到Mega菜单可见的问题（主菜单外的Mega菜单）

1 个答案: