Question

所以我一直有一些我认为最奇怪的错误，因为我在一个浏览器大小上使用jquery操作一个元素，并期望css以不同的浏览器大小来获取松弛。

调整浏览器大小 - 菜单应保留（＆lt; 768px），应显示Box with Open。点击什么。
调整浏览器大小（＆gt; 768）打开的框应该离开，菜单又回来了。
重复第一步。
点击打开 - 观看魔术。

问题：点击＆＃34后打开菜单（＆gt; 768px）调整浏览器大小;打开＆＃34;带x的盒子会消失，好的。现在调整大小，重新出现带有x的框。这不应该发生，菜单应该消失。包含＆＃34;打开＆＃34;的框应该重新出现，你应该重新开始＆＃34;。

刷新页面，缩小浏览器，单击打开，在所有内容完成后单击x。
调整浏览器大小。

我的菜单在哪里。为什么＆＃34; Open＆＃34;还在页面上。

其他问题

Theres是一个额外的错误，我不能用这个小提琴复制，问题是，当x滑入时，它是一个32x32的盒子，感觉就像盒子在32x28处滑动然后当它完成滑动时它会增加额外的4如果你走进一个侧面拿着一块揉成一条毛巾的房间，然后当你走进去的时候让毛巾掉落到全长（它看起来很破碎）

我在这里无法复制，我使用相同的html，css和jquery。所以它可能是一个冲突的库（？） - 会导致什么？

Answer 1

通过使用jquery的动画函数（.hide（）,. show（）），您可以直接操作该元素的样式属性，该属性总是比样式表更具特异性，所以它会覆盖你在那里设置的响应式样式。

要解决这个难题，请使用CSS动画替换jquery动画调用。只需addClass（＆＃39;有效＆＃39;），removeClass（＆＃39;有效＆＃39;）。使用您喜欢的任何课程代替＆＃34;活跃＆＃34;。然后，您仍然可以设置保持响应所需的所有各种属性。对于动画，使用CSS＆＃34;过渡＆＃34;属性。

Answer 2

在这里，我创建了一个小提琴，我只使用jQuery（和你一样的jQueryUI）来实现你的目标：

http://jsfiddle.net/Monteduro/kcr08hd7/

$(document).ready(function(){

  menuFromSize( $(window).width(), true ); // First status
  $(window).resize(function(){
      menuFromSize( $(this).width(), false ); // Edit at every resize
  });

  $('#open-panel').click(function() {
      $('#side-panel').show('slide', {'direction': 'left'}, 500);
      $(this).hide();
      $('#close-panel').delay(500).show('slide', {'direction': 'left'}, 500);
  });

  $('#close-panel').click(function() {
      $('#side-panel').delay(500).hide('slide', {'direction': 'left'}, 500);
      $(this).hide('slide', {'direction': 'left'}, 500);
      $('#open-panel').delay(1000).show('slide', {'direction': 'left'}, 500);
  });

});

// Function that handle the resizing 
function menuFromSize(size, first_time) {

    if ( size < 768 ) {

        if ( first_time ) {

            $('#side-panel').hide();
            $('#open-panel').show();
            $('#close-panel').hide();  

        }else{

            if ( !$('#close-panel').is(':visible') ) {
                $('#side-panel').hide();
                $('#open-panel').show();
                $('#close-panel').hide();
            }

        }

    }else{

        $('#side-panel').show()
        $('#open-panel').hide();
        $('#close-panel').hide();  

     }

}

使用不同浏览器大小的菜单会产生意外结果

2 个答案: