Question

如何选择使用JQuery当前的li而不是其父级。

在下面的示例中，当我将鼠标悬停在包含父li的li上时，“world”会显示在父级以及当前的li上。

我想只在当前的李中显示'世界'。

我该怎么做？

式：

a.show-anyway
{
  display: block;
}
a.world
{
  display: none;
}
a.active
{
  display: block;
}

列出项目：

<ul class="currentlist">
<li><a href="#" class="show-anyway">hello</a><a href="#" class="world">world</a>
<li><a href="#" class="show-anyway">hello</a><a href="#" class="world">world</a>
 <ul>
   <li><a href="#" class="show-anyway">hello</a><a href="#" class="world">world</a></li>
   <li><a href="#" class="show-anyway">hello</a><a href="#" class="world">world</a></li>
 </ul>
</li>
<li><a href="#" class="show-anyway">hello</a><a href="#" class="world">world</a></li>
<li><a href="#" class="show-anyway">hello</a><a href="#" class="world">world</a>
 <ul>
   <li><a href="#" class="show-anyway">hello</a><a href="#" class="world">world</a></li>
   <li><a href="#" class="show-anyway">hello</a><a href="#" class="world">world</a></li>
 </ul>
</li>
<li><a href="#" class="show-anyway">hello</a><a href="#" class="world">world</a></li>

JQuery的：

$(document).ready(function() {
  $('.currentlist li').hover(function() {
    $(this).find('a').addClass('active');
  }, function() {
    $(this).find('a').removeClass('active');
  });
});

Answer 1

您需要抓取父母并在进入/离开孩子时添加/删除课程，如下所示：

$(function() {
  $('.currentlist li').hover(function() {
    $(this).children('a').addClass('active').end()
           .parents().children('a').removeClass('active');
  }, function() {
    $(this).children('a').removeClass('active').end()
           .parents().children('a').addClass('active');
  });
});

You can give it a try here，这会抓住父母并在进入时从他们的<a>孩子中移除课程，并在离开时恢复它，尝试演示，我认为这就是你所追求的。

Answer 2

我认为问题出在eventbubbeling上，我在jsFiddle处玩了一下，发现了一些小改进。试试这个jQuery部分：

$(document).ready(function() {
  $('.currentlist li').hover(function(evt) {
    $(this).children('a.world').addClass('active');
      evt.stopPropagation()
  }, function(evt) {
    $(this).children('a.world').removeClass('active');
  });
});

Answer 3

这不是最好的解决方案，但它可能会帮助您找到更好的方法。

jsfiddle.net/s7TaT

Answer 4

问题在于，如果你正在徘徊“孩子李”，你仍然在徘徊其父母。所以你的jQuery函数正是你所说的： - ）

如果您只想将'active'css类添加到实际的“li”中，那么您必须从其所有“parent lis”中删除“active”类。

我建议不要将类添加到a标签中，而是添加到li本身（它实际上是活跃的li，而不仅仅是一个链接）

在此处试试：http://jsfiddle.net/rCYAm/

JQuery如何只选择当前的li而不是父级

4 个答案: