Jquery代码在安卓移动端无法运行问题求助

先看你代码里最明显的错误——class选择器写错了！你用的$("solutions")是在找标签名为<solutions>的元素，但你的目标是class为solutions的div，必须加上.前缀，写成$(".solutions")，这就是为什么页面加载时这些div没隐藏的原因！

接下来解决移动端点击事件失效的问题，结合移动端浏览器的特性，给你两个优化方向：

1. 修正选择器并优化事件绑定 #

把你的jQuery代码改成这样：

$(document).ready(function() {
  // 修正class选择器，选中所有class为solutions的div并隐藏
  $(".solutions").hide();
  
  // 用on()方法绑定事件，同时兼容click和touchstart，解决移动端触摸响应问题
  $("button").on("click touchstart", function(e) {
    // 阻止事件冒泡和默认行为，避免移动端的误触或延迟
    e.stopPropagation();
    e.preventDefault();
    // 切换相邻的solutions div的显示状态
    $(this).next("div").toggle();
  });
});

2. 添加CSS优化移动端体验 #

在你的CSS里加上这几句，消除移动端点击的默认高亮和300ms延迟：

button {
  -webkit-tap-highlight-color: transparent; /* 移除点击高亮 */
  touch-action: manipulation; /* 禁用双击缩放，消除300ms延迟 */
  cursor: pointer; /* 明确鼠标指针样式，提升交互感知 */
}

为什么这样改？ #

• 选择器错误是核心问题，没有.的话jQuery根本找不到目标元素，自然没法隐藏；
• 移动端浏览器对click事件可能有300ms延迟（为了判断是否是双击），加上touchstart事件可以更快响应；
• 阻止默认行为和冒泡能避免移动端的一些奇怪交互冲突；
• CSS的优化能让按钮在移动端的点击体验更接近PC端。

测试一下，这样修改后，页面加载时solutions div会正常隐藏，移动端点击按钮也能正常触发toggle效果了。

内容的提问来源于stack exchange，提问作者Oghenebrume