Question

这可能很难解释。

我正在使用下面的代码将div部分地从窗口中水平移出并再次返回。这有效，但我有一两个问题。

我切换的div根据窗口宽度（vw）具有可变宽度，而不是每个窗口宽度都是相同的vw单位数。这是由不同窗口宽度的媒体查询控制的。

这会导致一个问题，因为当div被切换为部分关闭窗口并且我缩放窗口时，屏幕中可见的div数量会发生变化，这是我不想要的。另外，当我在屏幕上完全切换div时，宽度与窗口大小的媒体查询不一致。

我想要发生的是切换div关闭窗口，无论窗口大小如何，总是在窗口中留下相同数量的div。另外，当我在屏幕上切换div时，div会根据窗口大小的媒体查询获取宽度，就像那时一样。

所以：当切换出视图（部分）时，我希望div根据媒体查询继续按窗口宽度更改进行缩放。但即便如此，我希望div只在窗口内显示80个像素。当div再次以全视图切换时，它将根据媒体查询设置具有正确的宽度。

也许这个：看起来div在部分关闭窗口时需要正确对齐。因此，如果缩放窗口，则随后更改div宽度大小不会影响它在窗口中的显示方式。然后它保持在80像素，因为窗口的div会变小或变大。但是当div被切换为再次完全出现在屏幕中时，它需要再次向左对齐窗口。这可能会以某种方式工作，如何编码？

JSFIDDLE Here。有人可以帮忙吗？

这是我的代码：

$(document).ready(function () {
        $("#togglebutton").click(function () {
        if($(this).hasClass('active')){

        $(this).removeClass('active');
        $("#myToggleDiv").animate({
                left: '0%'
        });
        }else{
        $(this).addClass('active');
        $("#myToggleDiv").animate({
                left: -$('#myToggleDiv').width() + 80
        });
        }


        });
    });

Answer 1

如何在80px的边距上添加调整，并使用100％的宽度进行定位？

    $(document).ready(function() {
      $("#togglebutton").click(function() {
        if ($(this).hasClass('active')) {

          $(this).removeClass('active');
          $("#myToggleDiv").animate({
            left: '0%',
            'margin-left': '0'
          });
        } else {
          $(this).addClass('active');
          $("#myToggleDiv").animate({
            left: '-100%',
            'margin-left': '80px'
        });
    }


  });
});

水平

1 个答案: