jquery - 在窗口调整大小时关闭 jQuery 事件

Question

所以我目前有一个看起来像这样的网站:

在移动设备上，内容会折叠起来，看起来像这样:

这正是我想要的。伟大的!但是，我不希望这些部分在更大的屏幕尺寸上仍然可以折叠。

目前它在使用 CSS 调整大小时可以很好地隐藏/显示，但是当您调整窗口大小时并开始使用 Coffee 时一切都会出错。

问题#1:

如果加载内容可折叠的页面，我可以在调整大小后停止折叠事件，但在后续调整大小后我再也无法打开它。或者，如果您从显示的内容开始并调整大小直到它折叠，这两个转换似乎同时触发，并且它会在内容再次消失之前短暂地显示出一丝内容。

问题#2:

一旦可折叠，单击标题使用 jQuery slideDown/up 转换来显示/隐藏内容，但如果隐藏它然后再次调整大小以使窗口变大，内容将保持隐藏状态。

我敢肯定这两个都非常简单，但我几乎一整天都在用头撞它，但我想不通:(

因此，如果有人有任何见解或可以提供一些建议，我将不胜感激。

这是一个JSFiddle与我相关的 CSS、Coffeescript 和 HTML 的内容部分

还有 Coffeescript 的问题:

$ = window.jQuery

class Collapse
  constructor: (element) ->
    @collapseBreakPoint = 400
    @element = $(element)
    @init()

  init: ->
    @setCollapseOnClick()
    @setOnResize()

  setOnResize: ->
    $(window).on 'resize', =>
      clearTimeout(resizeId)
      resizeId = setTimeout(@doneResizing, 500)

  doneResizing: =>
      if $(window).width() > @collapseBreakPoint
        @element.find('.collapse__label').off 'click'
      else
        @setCollapseOnClick()

  setCollapseOnClick: ->
    if $(window).width() < @collapseBreakPoint
      @element.find('.collapse__label').on 'click', (event) =>
        content = $(event.target).closest('[data-collapse]').find('.collapse__content')
        unless content.hasClass('open')
          content.addClass('open').stop(true, false).slideDown(500)
        else
          content.removeClass('open').stop(true, false).slideUp(500)

$.fn.collapse = ->
  new Collapse @

$.fn.collapse.Constructor = Collapse

$ -> $('[data-collapse]').collapse()

谢谢

Answer 1

为了处理这类事情，我通常会这样做:

var isMobile;

function checkMobile() {
  if ($(window).width() <= 767) {
    isMobile = true;
  }
  else {
    isMobile = false;
  }
  // Mobile-specific-changes here I.E.:
  if (isMobile) {
    $('.mobSlide').addClass('collapsable');
  }
  else {
    $('.mobSlide').removeClass('collapsable');
  }
  $('p').prepend('Is mobile? | ' + isMobile);
  $('.mobSlide').text($('.mobSlide').attr('class'));
};

$(document).ready(function() {
  checkMobile();
});

$(window).resize(function() {
  checkMobile();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="mobSlide"></div>
<p></p>

我什至不理解你使用的语法 (CofeeScript)，所以这只是为了展示一种解决我所理解的问题的方法 D: