Выключайте JQuery событий в окне изменения размера

Question

Так что я в настоящее время есть сайт, который выглядит следующим образом:

И на мобильный контент разрушается, так что это выглядит следующим образом:

Какие именно так Я хочу это. Большой! Тем не менее, я не хочу, чтобы разделы все еще были разборчивыми при больших размерах экрана.

В настоящее время он скрывает/отображает красиво при изменении размера только с помощью CSS, но все идет не так, когда вы изменяете размер окна и начинаете использовать кофе.

Выпуск № 1:

При загрузке страницы с складным контентом, я могу остановить событие коллапса после изменения размера, но тогда я не могу включить его снова после последующего изменяет размера. Или, если вы начинаете с отображаемого содержимого и изменяете его размер до тех пор, пока он не обрушится, оба перехода, похоже, сразу срабатывают, и на короткое время отображается проблеск содержимого, прежде чем он исчезнет снова.

Выпуск № 2:

После того, как его складная, щелкнув заголовок использует JQuery slideDown/до перехода для отображения/скрытия содержимого, но если вы скрываете это то размер снова, чтобы сделать окно больше, распорки содержание скрытый.

Я уверен, что оба из них довольно просты, но я стучал головой о ней почти буквально весь день, и я не могу понять :(

Так что, если у кого есть какие-либо понять или может одолжить некоторые советы я был бы благодарен

Вот 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>

Я даже не undertsand синтаксис вы используете (CofeeScript), так что просто показать один из способов решения, что я понял, проблема D: