防止绝对定位的嵌套ul关闭,直到悬停在外面

时间:2017-12-08 17:49:31

标签: jquery css

我有一个导航菜单,最后一个li包含一个嵌套的ul来显示下拉菜单。我想要做的是在父li的悬停时显示嵌套菜单,并在您从菜单中悬停时隐藏。我现在面临的问题是,只要您尝试鼠标进入子菜单,菜单就会开始出现故障。我假设这是因为子菜单的绝对位置。我该如何解决这个问题?

$(function() {
  $('li.has-sub')
  .mouseover(function() {
		$(this).find('ul').slideDown();
	})
	.mouseout(function() {
		$(this).find('ul').slideUp();
	});
});
ul {
  list-style-type:none;
  padding:0 30px;
}
ul.nav {
  border:1px solid black;
}
ul.nav > li {
  display:inline-block;
  line-height:50px;
  margin-left:30px;
}
  ul.nav > li:first-child {
    margin-left:0;
  }
  ul.nav > li > ul {
    display:none;
    position:absolute;
    border:1px solid black;
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav">
  <li>Link One</li>
  <li>Link Two</li>
  <li>Link Three</li>
  <li class="has-sub">
    Link Four
    <ul>
      <li>Sub Link One</li>
      <li>Sub Link Two</li>
      <li>Sub Link Three</li>
    </ul>
  </li>
</ul>

1 个答案:

答案 0 :(得分:1)

您错过了.stop()方法:

$(function() {
  $('li.has-sub').mouseover(function() {
    $(this).find('ul').stop().slideDown();
  })
  .mouseout(function() {
    $(this).find('ul').stop().slideUp();
  });
});
ul {
  list-style-type:none;
  padding:0 30px;
}

ul.nav {
  border:1px solid black;
}

ul.nav > li {
  display:inline-block;
  line-height:50px;
  margin-left:30px;
}

ul.nav > li:first-child {
  margin-left:0;
}

ul.nav > li > ul {
  display:none;
  position:absolute;
  border:1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="nav">
  <li>Link One</li>
  <li>Link Two</li>
  <li>Link Three</li>
  <li class="has-sub">
    Link Four
    <ul>
      <li>Sub Link One</li>
      <li>Sub Link Two</li>
      <li>Sub Link Three</li>
    </ul>
  </li>
</ul>