Question

我有一个简单的2级菜单，如果鼠标结束，上面的菜单应该“选中”这个类，当移动到另一个第一级菜单项时，应该删除该类。但那不是问题，已经有效了。

我的问题是：第一级菜单项应该保持“选中”，直到我继续使用另一个第一级菜单项。到目前为止，只要我将鼠标从项目

中删除，我的脚本就会删除“已选择”的类

<script type="text/javascript">
    $(document).ready(function(){
        $("#navi li").hover(function(){
            $(this).addClass('selected');
        },function(){
            $(this).removeClass('selected');
        });
    });
</script>

我希望所有带有“已选定”类的项目在我的鼠标位于另一个项目时立即删除它们的类，但如果鼠标仅在子菜单项上或者它可能在页面上，则所选项目应保持选中状态。

Answer 1

这就是你追求的吗？您可以在悬停时删除所有选定的类，然后将selected添加到所需的元素。

 $(document).ready(function(){
        $("#navi li").hover(function(){
            $("#navi li").removeClass('selected');
            $(this).addClass('selected');
        }
    });

Answer 2

尝试绑定mousemove事件：

$("ul").mousemove(function (e) {
    if (e.target.tagName == "LI") {
         $(".selected").removeClass("selected");
         $(e.target).addClass("selected");        
    }
});

Demo.

Answer 3

这发生了因为以下林：

},function(){
                $(this).removeClass('selected');
            });

这意味着当您将鼠标移出时会执行上述回调..

而是这样做：

 $(document).ready(function(){
            $("#navi li").hover(function(){
                $(this).addClass('selected');
            },function(){ });
        });

http://jsfiddle.net/SyvYv/

参考http://api.jquery.com/hover/

添加＆amp; removeClass jQuery

3 个答案: