Question

我想在li元素中添加一个类，它是li的子元素。

<div id="test" class="list">
<ul>
  <li><a id="Inbox">Inbox</a>
    <ul></ul>
  </li>
<li><a id="Sent">Sent</a>
    <ul></ul>
  </li>
<li><a id="Archive">Archive</a>
    <ul></ul>
  </li>
<li><a id="Deleted">Deleted</a>
  <ul>
      <li><a id="Subfolder1">Sub Folder 1</a></li>
    </ul>
 </li>
</ul>
</div>

鼠标输入和鼠标离开功能：

$('#test li').each(function(){
    $(this).on("mouseenter",function(){
      $(this).addClass("enter-folder");
    });
    $(this).on("mouseleave",function(){
      $(this).removeClass("enter-folder");
    });
  });

当鼠标在子文件夹1上时，该类正在添加到子文件夹li elemnt以及已删除文本的父li元素。

小提琴：http://jsfiddle.net/UVJgF/36/

当我将鼠标放在子文件夹1上时，我只想将子类添加到子文件夹。

如何解决此问题。

Answer 1

使用event.stopPropagation

$(document).ready(function () {
    $('#test li').each(function(){
        $(this).on("mouseenter",function(e){
            e.stopPropagation(); //added here
          $(this).addClass("enter-folder");
        });
        $(this).on("mouseleave",function(e){
            e.stopPropagation(); //added here
          $(this).removeClass("enter-folder");
        });
      });
});

OP发表评论后更新

DEMO

使用.hover()

$(document).ready(function () {
    var li = $('#test li');
    li.hover(function (e) {
        e.stopPropagation(); //added here
        li.removeClass("enter-folder")//added here to remove class from all li items
        $(this).addClass("enter-folder");
    }, function (e) {
        e.stopPropagation(); //added here
        li.removeClass("enter-folder");//added here to remove class from all li items
    });
});

Answer 2

您也可以使用

$(document).ready(function () {
     $('#test li').hover(function(e){
            e.stopPropagation();
          $('#test li').removeClass("enter-folder");
           $(this).addClass("enter-folder");
        },function(e){
            e.stopPropagation(); 
          $(this).removeClass("enter-folder");
        });
});

参见 demo 参考hover和event.stopPropagation

在mouseenter上向子元素添加类，该类也被添加到jquery中的父元素

2 个答案: