jQuery show/hide 切换在第一次触发后停止在移动设备上工作

Question

URL 是 http://development-client-server.com/dreamscience/product-category/models/focus/focus-st/focus-st225-mk2/，问题出在显示 "Filter Products" 的蓝色按钮上。如果您在移动设备上打开它，请单击 "Model" 它可以正常打开和关闭。其他人也一样。但是，如果您保持打开 "Model" 然后尝试打开另一个，例如 "Category" 切换将不再起作用。

我已经尝试了 toggleClass()、toggle()、slideToggle() 和直接 show() 和 hide() 并搜索了大量不同的变体。我也试过将 "click" 更改为 "touchstart click" 并仅使用 "touchstart" 而不做任何更改。

它在屏幕缩小到移动尺寸的普通计算机上运行良好。它不适用于 iPhone Safari 运行最新版本。

这是脚本的当前版本：

function mobileFiltering() {
  $(document).on("click", ".prdctfltr_regular_title", function() {
    var status = $(this).hasClass('active');
    if (status) {
      $(this).removeClass('active');
      $(this).next().hide();
    } else {
      $(this).addClass('active');
      $(this).next().show();
    }
  });
}

if ($(window).width() < 975) {
  mobileFiltering();
} else {
  $('.prdctfltr_regular_title').unbind();
}

$(window).resize(function() {
  if ($(window).width() < 975) {
    mobileFiltering();
  } else {
    $('.prdctfltr_regular_title').unbind();
  }
});

另外，更奇怪的是，如果我删除 show/hide 开关并仅具有 removeClass/addClass 功能，它就可以正常工作。

非常感谢对此的任何帮助，因为这似乎是我在移动设备上进行的每次切换的问题。

Answer 1

这似乎是由于您设置的事件委托触发了太多次事件所致，我的建议是使用 stopPropagation.

停止所有其他事件

像这样：

function(e) {
  e.stopPropagation();
  e.stopImmediatePropagation();

希望对您有所帮助！

jQuery show/hide 切换在第一次触发后停止在移动设备上工作

jQuery show/hide toggles stops working on mobile after first fires

javascript

mobile

jquery

toggle