Question

我的代码存在问题。每当我在浏览器或移动设备中加载页面时，当我只点击一次时，我会尝试多次切换它。我正在尝试使用此语法代码使其响应。

$(window).resize(function() {
  $(".textcontent").hide();

  if ($(window).width() <= 480) {

    jQuery(function($) {
      $(document).ready(function() {
        $(".textcontent").hide();
        $(".titleheader").click(function() {
          $(this).toggleClass("active").next().slideToggle("fast");
          return false;
        });
      });
    }); 

  }
});

Answer 1

文本不止一次切换，因为每次激活resize事件时都会绑定click处理程序。每个绑定都会附加另一个处理程序，因此，根据resize事件触发的次数，您最终可能会立即触发许多单击处理程序。

我建议您根据屏幕宽度绑定或取消绑定点击处理程序，如下所示：

$(function() {

  // function to toggle a text section

  function toggleText(elm) {
    $(elm).toggleClass("active").next().slideToggle("fast");
  }

  // resize event handler

  $(window).on('resize', function() {

    if ($(window).width() <= 480) {

      // if window <= 480, unbind and rebind click handlers, and hide all text content

      $(".titleheader").off('click').on('click', function() {
        toggleText(this);
      });

      $(".textcontent").hide();

    } else {

      // if the window > 480, unbind click handlers and hide all text

      $(".titleheader").off('click');
      $(".textcontent").show();

    }

  }).trigger('resize'); // initialize - trigger the resize once upon load

});

WORKING EXAMPLE

您可能还需要throttle或"debounce"您的调整大小处理程序，以便在IE，Safari和Chrome中won't fire continuously。

编辑：

另一种方法是设置一个标志，以指示布局是“小”还是“大”。然后，如果标志未指示所需的布局，则仅更改布局：

$(function() {

  // layout flag (defaults to "not small")
  var small = false;

  // function to toggle a text section
  function toggleText(elm) {
    $(elm).toggleClass("active").next().slideToggle("fast");
  }

  // resize event handler
  $(window).on('resize', function() {


    if ($(window).width() <= 480) {

      // if window <= 480 and the layout is "not small", bind click handlers and hide all text content

      if (!small) {

        console.log('made small');
        $(".titleheader").on('click', function() {
          toggleText(this);
        });
        $(".textcontent").hide();

        // set the layout flag to "small"
        small = true;

      }

    } else {

      // if the window > 480 and the layout is "small", unbind click handlers and hide all text

      if (small) {

        console.log('made large');
        $(".titleheader").off('click');
        $(".textcontent").show();

        // set the layout flag to "not small"
        small = false;
      }

    }

  }).trigger('resize'); // initialize - trigger the resize once upon load

});

WORKING EXAMPLE

响应式Jquery切换命令

1 个答案:

编辑：