javascript 菜单悬停状态丢失

t3psigkw  于 2022-12-25  发布在  Java
关注(0)|答案(3)|浏览(125)

我喜欢我的菜单在:hover上交互。
代码如下:

$('#menu img').hover(function (){
    $(this).removeClass();
    $(this).addClass('menuon');
    return false;
}, function(){
    $(this).removeClass();
    $(this).addClass('menuoff');
    return false;
});

这段代码工作正常,但副作用是当 menuon 状态结束时,它会丢失它的类并关闭。
你能处理好吗...我喜欢开着的状态一直开着!
这里是the working page

ni65a41a

ni65a41a1#

您可以通过从悬停事件中删除当前菜单项来执行任何操作:

$('#menu img:not(.menuon)').hover(
...

但是您将当前菜单项样式与悬停样式混合在一起,我认为这会使用户感到困惑。
如果您只使用javascript应用悬停样式,并添加一个currentMenu类,使当前菜单项的样式与menuon样式略有不同,那么看起来可能会更好。

<img src="layout/menu_acceuil.jpg" class="currentMenu" /> 
<img src="layout/menu_pourquoi.jpg" /> 
...
bq8i3lrv

bq8i3lrv2#

如果你检查dom,你会发现menuoff和menuon都被添加了,你应该显式地删除这两个类:

$('#menu img').hover(function (){
    $(this).removeClass('menuoff');
    $(this).addClass('menuon');
    return false;
}, function(){
    $(this).removeClass('menuon');
    $(this).addClass('menuoff');
    return false;
});
dz6r00yl

dz6r00yl3#

就像meder说的,你需要指定要删除的类。我不会有一个关闭状态的替代类。你所需要的只是:

$('#menu img').hover(function (){
    $(this).addClass('menuon');
    return false;
}, function(){
    $(this).removeClass('menuon');
    return false;
});

相关问题