Question

我在jquery中使用mouseenter和mouseleave事件在无序列表的<li>上显示鼠标经过它们时的一些图像。以下是该列表通常的样子：

<ul class="myTree">
    <li class="treeItem" catid="1" catname="Category 1">
        <img src="img/fleche_hori.png" class="expandImage"/>
        Category 1
        <img src="img/cross.png" class="hidden removecategory"/>
        <ul>
            <li class="treeItem" catid="2" catname="Subcategory 1 1">
                <img src="img/spacer.gif" class="expandImage"/>
                Subcategory 1 1
                <img src="img/cross.png" class="hidden removecategory"/>
            </li>
            <li class="treeItem" catid="3" catname="Subcategory 1 2">
                <img src="img/spacer.gif" class="expandImage"/>
                Subcategory 1 2
                <img src="img/cross.png" class="hidden removecategory"/>
            </li>
        </ul>
    </li>
    <li class="treeItem" catid="4" catname="Category 2">
        ...
    </li>
</ul>

注意：我知道它很难阅读，但我尽力使其尽可能可读。

因为你可以看到它只是一个用于展开/折叠树的树，每个项目都标有类“treeItem”。我需要这个类留下来，因为它是所有这些需要在鼠标移过时显示图像的项共享的公共类，我决定将我的事件处理程序绑定到它。

需要在mouseenter / mouseleave上显示/隐藏的图像是每个项目的第二个（src =“img / cross.png”）。我用这个脚本很容易设法：

$(document).on("mouseenter", ".treeItem", function (e) {
    //e.stopPropagation();
    $(this).children(".removecategory").show();
});

$(document).on("mouseleave", ".treeItem", function (e) {
    //e.stopPropagation();
    $(this).children(".removecategory").hide();
});

我的问题是，当一个项目被扩展时（即“类别1”被扩展并且“子类别1 1”和“子类别1 2”现在被显示）并且我用鼠标悬停任何子类别，这些子类别的图像将按要求显示，但父类别（即“类别1”）图像不会隐藏，因为我还在徘徊它...

我尝试使用e.stopPropagation（）;但它没有做任何更好的事情......

当我徘徊其中的一些内容时，任何人都知道如何解决这个问题并在元素上触发mouseleave？

您可以查看http://api.jquery.com/mouseleave/#example-0，特别是代码块下面的演示，看看我的意思。通常（在演示的右侧）我希望当鼠标进入黄色容器时触发蓝色容器的mouseleave事件。

我希望我的问题很明确，因为很难解释......

修改：

我发现了一种修改我的mouseenter事件处理程序的方法：

$(document).on("mouseenter", ".treeItem", function (e) {
    $('.removecategory').each(function() {
        $(this).hide();
    });
    $(this).children(".removecategory").show();
});

但这并不完美，因为我需要保留整个父项（即“类别1”项目）并重新输入它以在悬停子项目后再次显示图像。

如果有人有更好的方法请分享！

Answer 1

为每个类别和子类别添加范围：

<ul class="myTree">
    <li class="treeItem" catid="1" catname="Category 1">
        <img src="img/fleche_hori.png" class="expandImage"/>
        <span class="Item">Category 1</span>
        <img src="http://www.pokerland-il.com/images/smilies/smile.png" class="hidden removecategory"/>
        <ul>
            <li class="treeItem" catid="2" catname="Subcategory 1 1">
                <img src="" class="expandImage"/>
                <span class="Item">Subcategory 1 1</span>
                <img src="http://www.pokerland-il.com/images/smilies/smile.png" class="hidden removecategory"/>
            </li>
            <li class="treeItem" catid="3" catname="Subcategory 1 2">
                <img src="img/spacer.gif" class="expandImage"/>
                <span class="Item">Subcategory 1 2</span>
                <img src="http://www.pokerland-il.com/images/smilies/smile.png" class="hidden removecategory"/>
            </li>
        </ul>
    </li>
    <li class="treeItem" catid="4" catname="Category 2">
        ...
    </li>
</ul>

将您的JS更改为：

$('.Item').mouseover(function(){
    $(this).next(".removecategory").show();
});

$('.Item').mouseout(function(){
    $(this).next(".removecategory").hide();
});

http://jsfiddle.net/xBwyZ/3/

jQuery：mouseenter / mouseleave甚至停止传播

1 个答案: