0

所以我目前有一个如下所示的网站： 我的网站

在移动设备上，内容会折叠起来，看起来像这样： 我在 iOs 上的网站

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

目前它仅使用 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()

谢谢

4

1 回答 1

0

为了处理这种事情，我通常会这样做：

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 的一种方法：

于 2015-07-20T01:01:34.563 回答