Question

我有一个div，它位于屏幕宽度的15％处。点击后，该宽度增加到100％。它基本上是一个弹出式内容区域。

为了使原始15％宽度父级内的图标以一种漂亮，反应灵敏的方式居中，它们被设置为：

.parent
  position: relative;
  width: 15%;

.icons;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

这基本上会在左侧创建一个带有图标切换的旁边。图标位于parent内。但是，当点击图标时，我调整父级的大小以滑出并变为width: 100%;。突然之间，那些漂亮的百分比值相对于父母改变并移动到屏幕的中心。我想冻结它们，以免它们移动！换句话说，当父母div为15％时，我希望他们保持原来的位置。

小提琴：https://jsfiddle.net/ra6qa9jf/

Answer 1

最简单的解决方案是从红色框中删除图标div并为其提供新的父级。然后将新父级设置为始终具有15％的宽度并使其具有绝对位置，以使其在红色框上显示为一个图层。所以你的新HTML可能是：

<div class="parent"></div> //This is the red box, same styling as before
<div class="parent-2"> //This is the new parent container for the icons
    <div class="icons">
        <i class="fa fa-plus"></i>
    </div> //This is the icon, same as before
</div>

相应的新CSS：

.parent-2 {
    position: absolute;
    width: 15%;
    height: 100%;
    top: 0px;
    left: 0px;
}

最后，您只需要更新您的javascript，以便onClick侦听器更改正确的div宽度：

(function () {
    var parent = document.getElementsByClassName('parent')[0];
    var icons = document.getElementsByClassName('icons')[0],
      toggle = false;
  icons.addEventListener('click', function(event) {
    toggle = +!toggle;

    if (toggle) {
      parent.style.width = "100%";
    } else {
      parent.style.width = "15%";
    }

  });
}());

参考代码：

(function() {
  var parent = document.getElementsByClassName('parent')[0];
  var icons = document.getElementsByClassName('icons')[0],
    toggle = false;
  icons.addEventListener('click', function(event) {
    toggle = +!toggle;

    if (toggle) {
      parent.style.width = "100%";
    } else {
      parent.style.width = "15%";
    }

  });
}());

.parent {
  position: relative;
  width: 15%;
  height: 100%;
  background-color: red;
  transition: width 400ms ease-in-out;
}

.parent-2 {
  position: absolute;
  width: 15%;
  height: 100%;
  top: 0px;
  left: 0px;
}

.icons {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 60px;
}

.icons:hover {
  cursor: pointer;
}

body,
html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="parent"></div>
<div class="parent-2">
  <div class="icons">
    <i class="fa fa-plus"></i>
  </div>
</div>

修复（粘贴）父值调整大小的％值的位置

1 个答案: