Question

当屏幕尺寸小于600px时，我需要禁用slideUp和slideDown触发器。因此，当屏幕尺寸小于600px时，我不希望slideUp和slideDown正常工作。

我有这个jQuery来创建手风琴幻灯片：

//ACCORDION BUTTON ACTION
jQuery(function () {
jQuery('.accordion-trigger').click(function () {
    if (jQuery(this).data("slided") === true) {
        jQuery(this).next().slideUp('normal');
        jQuery(this).data("slided", false);
    } else {
        jQuery('.accordion-trigger').data('slided', false);
        jQuery('.sec').slideUp('normal');
        jQuery(this).next().slideDown('normal');
        jQuery(this).data("slided", true);
    }
});
});

我有这个代码来检查窗口大小：

jQuery(window).on("load resize", function (e) {
  if (jQuery(window).width() < 600) {
  }
});

如何禁用？

Answer 1

你可以这样做：

var small_screen;

jQuery(window).on("load resize", function () {
  if (jQuery(window).width() < 600) {

    small_screen = true;

  } else {

   small_screen = false;

 }

});

//ACCORDION BUTTON ACTION

    jQuery(function () {
    jQuery('.accordion-trigger').click(function () {

        if(small_screen){

             return;

        } else {

        if (jQuery(this).data("slided") === true) {
            jQuery(this).next().slideUp('normal');
            jQuery(this).data("slided", false);
        } else {
            jQuery('.accordion-trigger').data('slided', false);
            jQuery('.sec').slideUp('normal');
            jQuery(this).next().slideDown('normal');
            jQuery(this).data("slided", true);
        }

         }
    });
    });

Answer 2

//ACCORDION BUTTON ACTION
jQuery(function () {
jQuery('.accordion-trigger').click(function () {
if(disableSlide) return;   
if (jQuery(this).data("slided") === true) {
        jQuery(this).next().slideUp('normal');
        jQuery(this).data("slided", false);
    } else {
        jQuery('.accordion-trigger').data('slided', false);
        jQuery('.sec').slideUp('normal');
        jQuery(this).next().slideDown('normal');
        jQuery(this).data("slided", true);
    }
});
});
var disableSlide=false;
jQuery(window).on("load resize", function (e) {
  if (jQuery(window).width() < 600) {
    disableSlide=true;
  }
  else {disableSlide=false;}
}).trigger('resize');;

Answer 3

你可以在调整大小时删除对窗口大小的检查，并在JQuery函数中提出窗口高度请求。

//ACCORDION BUTTON ACTION
jQuery(function () {
jQuery('.accordion-trigger').click(function () {
//check window size, return if less than 600;
    if(window.innerHeight < 600) {
      return false;
    }
    if (jQuery(this).data("slided") === true) {
        jQuery(this).next().slideUp('normal');
        jQuery(this).data("slided", false);
    } else {
        jQuery('.accordion-trigger').data('slided', false);
        jQuery('.sec').slideUp('normal');
        jQuery(this).next().slideDown('normal');
        jQuery(this).data("slided", true);
    }
});
});

当屏幕尺寸小于600px时，禁用slideUp和slideDown

3 个答案: