Question

我的HTML菜单就像这样

<div style="margin-top: 200px; width: 140px; text-align: left; line-height: 20px;">
    <div class="lmenu">Home</div>
    <div class="lmenu">About Us</div>
    <div class="lmenu parent">Our Services
        <div class="subparent">
            Event Management
                <div class="child">
                Categories
                </div>
                <div class="child">
                Providing Facilities
                </div>
        </div>
        <div class="subparent">
            Rental
            <div class="child">
                AVEquipments
            </div>
            <div class="child">
                Other Services
            </div>
        </div>
        <div class="subparent">
            Exhibition Stalls 
            <div class="child">
                Standard Stall
            </div>
            <div class="child">
                Designed Stalls
            </div>
        </div>
    </div>
    <div class="lmenu parent">About Us
        <div class="subparent">
            Our Company
            <div class="child">
                Categories
            </div>
            <div class="child">
                Our Team
            </div>
        </div>
    </div>
</div>

我在mouseover和mouseout函数上使用jQuery来查看子项。但当我只悬停一个菜单项时，每个子菜单都会可见。

这是我的jquery

var $sub_itmes;
$(".parent").on({
    mouseover: function() {
        $sub_itmes = $(".lmenu").next().find(".subperent");
        $sub_itmes.css({
            "display": "block",
        });
        $sub_itmes.animate({
            "opacity": 1
        });
    },
    mouseleave: function() {
        $sub_itmes = $(".lmenu").next().find(".subperent");
        $sub_itmes.css({
            "display": "none",
        });
        $sub_itmes.animate({
            "opacity": 0
        });
    }
});

$(".subperent").on({
    mouseover: function() {
        $sub_itmes = $(this).closest('.lmenu').find(".chilld");
        $sub_itmes.css({
            "display": "block",
        });
        $sub_itmes.animate({
            "opacity": 1
        });
    },
    mouseleave: function() {
        $sub_itmes = $(this).closest('.lmenu').find(".chilld");
        $sub_itmes.css({
            "display": "none",
        });
        $sub_itmes.animate({
            "opacity": 0
        });
    }
});

我找不到我错的地方。

谢谢。

Answer 1

你的发现是这样做的

来自当前元素find .lmenu（即父级）
现在找到所有.chilld里面的顶级父母（将找到所有这些）
显示/隐藏它们

通过使用语法$(query,scope)，您可以找到当前选择中的元素。

var $sub_itmes;
$(".parent").on({
    mouseover: function() {
        $sub_itmes = $('.subperent',this);
        $sub_itmes.fadeIn('slow');
    },
    mouseleave: function() {
        $sub_itmes = $('.subperent',this);
        $sub_itmes.fadeOut('slow');
    }
});

$(".subperent").on({
    mouseover: function() {
        $sub_itmes = $('.chilld',this);
        $sub_itmes.fadeIn('slow');
    },
    mouseleave: function() {
        $sub_itmes = $('.chilld',this);
        $sub_itmes.fadeOut('slow');
    }
});

fiddle

在旁注上看看hoverIntent插件，它会忽略鼠标快速移动，但只有在用户想要这样做时才会激活。

我使用jquery next和cosest选项只选择一个元素，但这会将类应用于每个元素

1 个答案: