水平导航栏悬停效果jquery

Question

我想创建一个基本的导航栏，如果你悬停在一个链接上，一个div显示（子菜单）。当我悬停在一个不同的链接上时，会显示一个不同的div。我当前的问题是，当我悬停在链接上，然后移动到子菜单上时，它也会消失（不是我想要的）。我怎么才能避免呢？只有当我没有在子菜单或该div的相应链接上悬停时，该子菜单才应该消失。

<ul class="menu">
    <li><a href="#" id="link0">Caviar</a><span>test</span></li>
    <li><a href="#" id="link1">Athena</a></li>
    <li><a href="#" id="link2">Knot</a></li>
    <li><a href="#" id="link3">Brooke Leaf</a></li>
</ul>

<div id="menulink0" class="sub-menu">Some text for the first link</div>
<div id="menulink1" class="sub-menu">Some text for the second link</div>
<div id="menulink2" class="sub-menu">Some text for the third link</div>
<div id="menulink3" class="sub-menu">Some text for the fourth link</div>

jQuery:

var $submenus = $('.sub-menu');
var $links = $('.menu a, .sub-menu').hover(function(e) {
  e.stopPropagation();
    $submenus.filter('#menu' + this.id).show();
}, function(e) {
  e.stopPropagation();

  $submenus.filter('#menu' + this.id).hide();
});

示例代码:http://jsfiddle.net/qlhj9rkm/123/

Answer 1

热门标签

Answer 2

相关问题

Answer 3

在这种情况下，我会完全跳过JavaScript，因为只使用CSS就可以轻松地实现您想要的东西。

使其工作的关键是对HTML进行结构化，使

嵌套在

:

<li><a href="#" id="link0">Caviar</a><span>test</span>
  <div id="menulink0" class="sub-menu">Some text for the first link</div>
</li>

现在，只要您将鼠标悬停在菜单项上，一个简单的样式表就可以显示

:

li:hover .sub-menu { 
  display: block;
}

下一个问题是希望如何显示子菜单。现在，顶层菜单将调整大小以适应子菜单。通常的解决方法是使用相对和绝对定位。我添加了一个片段来向您展示它是如何工作的。

null

.sub-menu {
  border: solid 2px black;
  background-color: red;
  display: none;
  padding: 20px;
  /* Add this to make the submenu a floating submenu */
  position: absolute;
  width: 200px; /* Or some reasonable value */
}

ul {
  padding: 10px;
  list-style: none;
}

li {
  padding: 10px;
  float: left;
  /* Add this to make the submenu a floating submenu */
  position: relative;
}


/* Add this to make the hover work */
li:hover .sub-menu {
  display: block;
}

a {
  border: solid 1px;
}

.show {
  display: block;
}

<ul class="menu">
  <li><a href="#" id="link0">Caviar</a><span>test</span>
    <div id="menulink0" class="sub-menu">Some text for the first link</div>
  </li>
  <li><a href="#" id="link1">Athena</a>
    <div id="menulink1" class="sub-menu">Some text for the second link</div>
  </li>
  <li><a href="#" id="link2">Knot</a>
    <div id="menulink2" class="sub-menu">Some text for the third link</div>
  </li>
  <li><a href="#" id="link3">Brooke Leaf</a>
    <div id="menulink3" class="sub-menu">Some text for the fourth link</div>
  </li>
</ul>