jQuery toggleClass 在移动设备上无法正常工作

Posted 2023-03-12

【中文标题】jQuery toggleClass 在移动设备上无法正常工作

【英文标题】：jQuery toggleClass doesn't work properly on mobile devices

【发布时间】：2017-03-19 17:31:47

【问题描述】：

我在使用 jQuery 切换功能时遇到问题，该功能在 PC 上运行良好，但在移动设备上无法运行。

我有带有图像图标作为打开链接的移动导航。单击时，它应该将类更改为活动，这会将其背景图像从经典菜单栏更改为十字。有同样问题的人知道如何解决吗？

谢谢！

$(document).ready(function()
$('#toggle-menu').click(function() 
    $(this).toggleClass('active');
);
);



#toggle-menu 
width: 30px; height: 30px; display: block;
background: url('menu-bar.png') no-repeat center center; background-size: cover;



.active#toggle-menu 
background: url('menu-cross.png') no-repeat center center; background-size: cover;
cursor: pointer;

【问题讨论】：

@Satpal 它仍然不起作用。实际上-确实如此，但不正确..我必须单击 3-5 次才能将 img 更改为“menu-cross”，然后再单击 3-5 次才能将其更改回“menu-bar”，但我会更改代码在这里

听起来它部分隐藏在另一个元素后面，当点击那个确切的可见部分时它会响应

@LGSon 但在 PC 上可以完美运行

【参考方案1】：

您正在将“活动”类切换到 id 切换菜单，因此您的复合类不正确。它需要这样供您选择和设置样式：

    #toggle-menu.active 
    background: url('menu-cross.png') no-repeat center center;
background-size: cover;
    cursor: pointer;