首页 文章

jQuery：mouseenter / mouseleave甚至停止传播

提问于
浏览 次
0

我'm using mouseenter and mouseleave events in jquery on an unordered list' s <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事件 .

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

EDIT ：

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

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

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

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

jquery mouseevent mouseenter mouseleave stoppropagation

1 回答

  • 1

    为每个类别和子类别添加 Span ：

    <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/

    回复于

相关问题