javascript - jQuery 显示/隐藏切换在第一次触发后停止在移动设备上工作

Question

网址是http://development-client-server.com/dreamscience/product-category/models/focus/focus-st/focus-st225-mk2/问题出在“过滤产品”的蓝色按钮上。如果您在移动设备上打开它，请单击“模型”，它可以正常打开和关闭。其他人也一样。但是，如果您打开“模型”，然后尝试打开另一个，说“类别”，则切换将不再起作用。

我尝试过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();
  }
});

更奇怪的是，如果我删除显示/隐藏切换并只具有removeClass/addClass 功能，它就可以正常工作。

希望得到任何有关此问题的帮助，因为这似乎是我在移动设备上执行的每次切换的问题。

Answer 1

这似乎是由于通过您设置的事件委托(delegate)触发了太多次事件而导致的，我的建议是使用 stopPropagation 停止所有其他事件。

像这样:

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

希望这有帮助!