功能适用于桌面和模拟器，但不适用于移动浏览器答案

【问题标题】：Function works on desktop and emulator but not on mobile browsers功能适用于桌面和模拟器，但不适用于移动浏览器
【发布时间】：2019-07-12 18:27:18
【问题描述】：

我有一个 WordPress Woocomerce 网站。我有一个阅读更多/阅读更少的功能，可以扩展/隐藏长的产品描述。它在桌面上运行良好。它甚至可以使用 Chrome 的移动模拟器工具。

但它不适用于任何移动浏览器。按下按钮只是将页面向上跳转一点。我假设浏览器没有读取.on('click 'touchstart').:

$(document).ready(function() {

      $(".product-readmore").on('click touchstart', function() {

          var description = document.querySelector(".product-description-readmore");

          if (description.style.height === '') {
            description.style.height = 'auto';
          } else if (description.style.height === 'auto') {
            description.style.height = '';
          } else {
            description.style.height = '92px';
          }

          $(this).text($(this).text() == 'Read less...' ? 'Read more...' : 'Read 
            less...');
          });
      });

【问题讨论】：

This 问题可能对您有所帮助。问题是touchstart 就像使用“onMouseDown”，你可能需要像“touch”这样的东西
@DIEGOCARRASCAL 谢谢你的建议。 “触摸”不起作用。我阅读了您提供的主题，但其中也没有任何效果。
你是如何测试的？什么浏览器？您能否制作一个独立的示例，以便我们进一步为您提供帮助？
@Twisty 我正在使用 appetize.io 进行测试，以模拟带有 safari 的 iphone 7。还使用 chrome 在我的 google Pixel 2 xl 上进行测试。该脚本适用于桌面版 chrome，但不适用于移动版。我创建了一个 jsFiddle jsfiddle.net/y9d03eL6/2，它适用于移动设备。这让我相信代码没问题，而 WordPress 中的某些东西导致了问题。

标签： javascript jquery wordpress mobile

【解决方案1】：

原来问题在于 WordPress 如何处理 jQuery。我把第一行改成jQuery(document).ready(function($){

它现在可以在所有浏览器、移动设备和其他浏览器中正常工作。

【讨论】：