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

Question

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

在移动设备上，内容会崩溃，因此它看起来像这样：

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

目前它仅使用CSS隐藏/显示调整大小，但是当您调整窗口大小并开始使用咖啡时，这一切都会出错。

问题＃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：