在单击显示和隐藏div jquery在ios设备中无法正常工作

ohtdti5x  于 2023-08-04  发布在  jQuery
关注(0)|答案(1)|浏览(141)

onClick显示和隐藏div jQuery在iOS中无法正常工作。
我试过这段代码在Android和桌面上都能正常工作

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.js"></script>
<script>
  $(".pdo").click(function () {
    $(".pup").show();
    $(".pdo").hide();
    $(".team").show();
  });
  $(".pup").click(function () {
    $(".pup").hide();
    $(".pdo").show();

    $(".team").hide();
  });
</script>
<style>
  .team,
  .pup {
    display: none;
  }
</style>

字符串
上面的代码不能正常工作,那么我把它改成下面的代码

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.js"></script>
<script>
  $(".pdo").click(function () {
    $(".pup").addClass('showp');
    $(".pdo").addClass('hidep');

    $(".team").addClass('showp');
  });
  $(".pup").click(function () {
    $(".pup").removeClass('showp');
    $(".pdo").removeClass('hidep');

    $(".team").removeClass('showp');
  });
</script>
<style>
  .team,
  .pup,
  .hidep {
    display: none !important;
  }
  .showp {
    display: block !important;
  }
</style>


上面的代码在iOS设备上也不能正常工作。

lymnna71

lymnna711#

您可以使用touchstart事件而不是使用click事件来处理触摸交互

*JQUERY

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.js"></script>
<script>
  $(".pdo").on("click touchstart", function () {
    $(".pup").addClass("showp");
    $(".pdo").addClass("hidep");
    $(".team").addClass("showp");
  });

  $(".pup").on("click touchstart", function () {
    $(".pup").removeClass("showp");
    $(".pdo").removeClass("hidep");
    $(".team").removeClass("showp");
  });
</script>

字符串

CSS

<style>
  .team,
  .pup,
  .hidep {
    display: none !important;
  }
  .showp {
    display: block !important;
  }
</style>

相关问题