Question

我有一个使用无样式列表HTML元素的导航。我的导航可以有两个级别的深度。

<ul class="nav">

  <li>
    <a href="#">depth-level-1 list item</a>
  </li>

  <li>
    <a href="#">depth-level-1 list item</a>
    <div class="subnav>
      <ul class="nav>
        <li>
          <a href="#">depth-level-2 list item</a>
        </li>
        <li>
          ...
        </li>
      </ul>
    </div>
  </li>

  <li>
    ...
  </li>

</ul>

我想要的是当用户将鼠标悬停在深度级别2 列表项上时，父li应该获得active类。

到目前为止我刚刚写道：

var s = $('.subnav');
s.mouseover(function() {
  s.parent('li').addClass('active');
}).mouseout(function(){
  s.parent('li').removeClass('active');
})

但是这会使所有深度级别1 列表项active而不是仅生成父项。你能帮我解决一下吗？

Answer 1

您需要引用悬停元素而不是所有子视图（您的s var，您应该使用$(this)代替）：

s.mouseover(function() {
  $(this).parent('li').addClass('active');
}).mouseout(function(){
  $(this).parent('li').removeClass('active');
})

请在此处查看：http://jsfiddle.net/shomz/5zBzX/

Answer 2

试试这个，

var s = $('.subnav');
s.mouseover(function() {
  $(this).closest('li').addClass('active');
}).mouseout(function(){
  $(this).closest('li').removeClass('active');
})

DEMO

在jQuery中修改父元素

2 个答案: