水平切换宽度可变的Div

Toggle a Div, with a variable width, horizontally

本文关键字：Div 水平      更新时间：2023-09-26

这很难解释。

我使用下面的代码太切换一个div部分出窗口水平和再次返回。这是有效的，但我有一两个问题。

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

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

我想要发生的是切换div off窗口，无论窗口大小如何，始终在窗口中留下相同数量的div。另外，当我在屏幕上切换div时，div的宽度与媒体查询的窗口大小一致，因为它在那一刻。

:当切换出视图(部分)时，我希望div继续根据媒体查询随窗口宽度变化而缩放。但即使这样，我希望div在窗口内只显示80像素。当div再次切换为全视图时，它将根据媒体查询设置具有正确的宽度。

也许这:似乎div需要右对齐时，部分关闭窗口。因此，如果窗口被缩放，div宽度大小的变化不会影响它在窗口中的显示方式。然后它保持在80px，因为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
        });
        }

        });
    });

如何添加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'
        });
    }

  });
});
相关文章：