Question

我有2个区块-一个位置固定，另一个在旁边。我希望单击按钮后固定块的长度增加，第二个块的大小减小，然后再次单击所有内容以将其返回到原始状态。固定的块将是侧边栏菜单，永久粘贴。

一切都应该发生在100％的宽度上。

操作方法，但重要的是固定块和固定块的宽度应指定为像素，而不是百分比。

这要完成吗？

jQuery(document).ready(function($) {
  jQuery(".btn").click(function() {
    var div1 = jQuery(".left");
    var div2 = jQuery(".right");

    if (div1.width() < 200) {
      div1.animate({
        width: "25%"
      }, {
        duration: 200,
        specialEasing: {
          width: "linear"
        }
      });

      div2.animate({
        width: "75%"
      }, {
        duration: 200,
        specialEasing: {
          width: "linear"
        }
      });
    } else {
      div1.animate({
        width: "5%"
      }, {
        duration: 200,
        specialEasing: {
          width: "linear"
        }
      });
      div2.animate({
        width: "95%"
      }, {
        duration: 200,
        specialEasing: {
          width: "linear"
        }
      });
    }
  });
});

.container {
  width: 100%;
  margin: 0 auto;
}

.left {
  float: left;
  position: fixed;
  width: 5%;
  height: 100%;
  background: pink;
  z-index: 5;
}

.right {
  float: right;
  position: relative;
  width: 95%;
  height: 300px;
  background: green;
}

.content {
  float: left;
  position: relative;
  width: 100%;
  height: 100px;
  background: silver;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="left">
    <input type="button" value="click" class="btn">
  </div>
  <div class="right">
    <div class="content"> abc </div>
  </div>
</div>

Answer 1

一切都应在100％宽度下发生。

...以像素为单位，而不是百分比。

您确定不是相反吗？尝试基于%而不是px或rem来制作css更好（除非在px中需要这样做）

无论如何，我都修复了您的代码，但是在%中，从现在起，如果需要的话，您可以使用px进行游戏：

jQuery(document).ready(function($) {

  jQuery(".btn").click(function() {

    var leftDiv = jQuery(".left");
    var rightDiv = jQuery(".right");

    console.log("leftDiv width: " + leftDiv.width() +
      " - " + "rightDiv width: " + rightDiv.width())
      
    var minWidthForRight = $('.container').width() - 300;
    var maxWidthForRight = $('.container').width() - 100;

    if (leftDiv.width() < 200) {


      leftDiv.animate({
        width: "300px",
        
      }, {
        duration: 200,
        specialEasing: {
          width: "linear"
        }
      });

      rightDiv.animate({
        width: minWidthForRight
      }, {
        duration: 200,
        specialEasing: {
          width: "linear"
        }
      });

    } else {

      leftDiv.animate({
        width: "100px"
      }, {
        duration: 200,
        specialEasing: {
          width: "linear"
        }
      });

      rightDiv.animate({
        width: maxWidthForRight
      }, {
        duration: 200,
        specialEasing: {
          width: "linear"
        }
      });

    }

  });

});

.container {
  width: 100%;
  margin: 0 auto;
}

.left {
  float: left;
  position: fixed;
  width: 150px;
  height: 300px;
  background: pink;
  z-index: 5;
}

.right {
  float: right;
  position: relative;
  width: 95%;
  height: 300px;
  background: green;
  resize: horizontal;
}

.content {
  float: left;
  position: relative;
  width: 100%;
  height: 100px;
  background: silver;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">

  <div class="left">
    <input type="button" value="click" class="btn">
  </div>

  <div class="right">
    <div class="content"> abc </div>
  </div>

</div>

编辑

是的，可以将左侧保留为px，将左侧保留为％，而不是％本身，而是根据屏幕分辨率以px计算。

基本上，您要获得容器的宽度并“消除”您在动画中指定的宽度：

var minWidthForRight = $('.container').width() - 300;

右侧为300 + (100% - 300 )，左侧为100 + (100% - 100 )

CSS JS固定位置侧边栏

1 个答案: