Question

我正在使用下面的代码将div部分切换出屏幕，并完全返回屏幕。这段代码告诉了＆side;＆＃34; sidebar＆＃34;是移动屏幕。但在我的情况下，由于媒体查询应用于侧边栏宽度，此功能存在问题。因此，我需要代码不要说明侧边栏移动的距离，而是以像素为单位在屏幕上留下多少侧边栏。 The demo here（使用媒体查询）。

$(document).ready(function () {
    $("#toggle").click(function () {
      if($(this).hasClass('active')){
        $(this).removeClass('active');
        $("#sidebar").animate({
          left: '0%'
        });
      } else {
        $(this).addClass('active');
        $("#sidebar").animate({
          left: '-55%'
        });
      }
  });
});

Answer 1

简单的数学：

假设您希望侧栏在屏幕上留下40px，其余隐藏。所以你想把它向左移动（宽度 - 40）。即。

＆＃13;

 $(document).ready(function () {
        $("#toggle").click(function () {
            if($(this).hasClass('active')){
                $(this).removeClass('active');
                $("#sidebar").animate({
                    left: '0%'
            });
        } else {
            $(this).addClass('active');
            $("#sidebar").animate({
                left: - ($("#sidebar").width() - 40)
            });
        }
    });
});

＆＃13;

html, body {
    width:100%;
    height: 100%;
}
#header {
    width: 100%;
    height: 20%;
    float: left;
    border: 1px solid;
}

#sidebar {
    width: 70%;
    height: 80%;
    position: relative;
    border: 1px solid;
}
#toggle {
    width: 10%;
    height: 40%;
    margin-right: 6.5%;
    margin-top: 3.5%;
    float: right;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sidebar">SIDEBAR<input type="button" value="Toggle" id="toggle"></div>

＆＃13;

Answer 2

不使用百分比设置负左值，而是使用元素的宽度并根据元素的宽度设置左值：

$("#sidebar").animate({
    left: '-' + ($("#sidebar").width()*0.55) + 'px'
});

检查此代码段：

$(document).ready(function () {
  $("#toggle").click(function () {
    if ($(this).hasClass('active')) {
      $(this).removeClass('active');
      $("#sidebar").animate({
        left: '0'
      });
    } else {
      $(this).addClass('active');
      $("#sidebar").animate({
        left: '-' + ($("#sidebar").width()*0.55) + 'px'
      });
    }
  });
});

html, body {
    width:100%;
    height: 100%;
}
#header {
    width: 100%;
    height: 20%;
    float: left;
    border: 1px solid;
}

#sidebar {
    width: 70%;
    height: 80%;
    position: relative;
    border: 1px solid;
}
#toggle {
    width: 10%;
    height: 40%;
    margin-right: 6.5%;
    margin-top: 3.5%;
    float: right;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sidebar">SIDEBAR<input type="button" value="Toggle" id="toggle"></div>

Answer 3

解决!!

SEE DEMO HERE

    $(document).ready(function() {
  $("#togglebutton").click(function() {
    var $container = $('#myToggleDiv');
    $container.toggleClass('hide');
  });
});

切换div进出屏幕

3 个答案: