0

我在无序列表上的 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”项目）并重新输入它以在悬停子项目后再次显示图像。

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

4

1 回答 1

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/

于 2012-05-22T12:58:53.977 回答