0

だから私は現在、次のようなウェブサイトを持っています： 私のウェブサイト

モバイルでは、コンテンツが次のように折りたたまれます。 iOS 上の私のウェブサイト

それはまさに私が望む方法です。すごい！ただし、大きな画面サイズでもセクションを折りたたむことは望ましくありません。

現在、CSS だけでサイズ変更するとうまく非表示/表示されますが、ウィンドウのサイズを変更してコーヒーの使用を開始すると、すべてがうまくいきません。

問題＃1：

折りたたみ可能なコンテンツでページをロードすると、サイズ変更後に折りたたみイベントを停止できますが、その後のサイズ変更後に再度オンにすることはできません。または、表示されているコンテンツから始めて、折りたたまれるまでサイズを変更すると、両方のトランジションが同時に発生したように見え、再び消える前にコンテンツが少しだけ表示されます。

問題＃2：

折りたたみ可能になると、ヘッダーをクリックすると、jQuery のスライドダウン/アップ遷移を使用してコンテンツが表示/非表示になりますが、非表示にしてからサイズを変更してウィンドウを大きくすると、コンテンツは非表示のままになります。

私はこれらの両方が非常に単純だと確信していますが、私は文字通り一日中頭を叩いていて、それを理解することはできません:(

ですから、誰かが洞察を持っているか、アドバイスを貸してくれるなら、私は感謝しています。

これは、関連する CSS、Coffeescript、および HTML のコンテンツ セクションを含む JSFiddle です。

そして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 であると理解したものを解決する 1 つの方法を示すだけです:

于 2015-07-20T01:01:34.563 に答える