Question

我正在尝试从左侧创建一个基本的弹出菜单。除了我试图隐藏菜单之外，主要div最终位于菜单下方。我不确定这是怎么回事。

    <div class="wrapper">
  <div class="slider">
    <div class="trigger">
      Click
    </div>
    <div class="units">
      <div class="unit">
        unit 1
      </div>
      <div class="unit">
        unit 2
      </div>
      <div class="unit">
        unit 3
      </div>
    </div>
  </div>
  <div class="display">
    <table>
      <thead>
        <tr>
          <th>col1</th>
          <th>col2</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>row1</td>
          <td>row1</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
</div>

html,
body,
.wrapper {
  height: 100%;
  margin: 0;
  padding: 0;
}

.slider,
.trigger,
.units,
.display {
  float: left;
}

.slider {
  width: 175px;
}

.unit {
  width: 100px;
  height: 50px;
  background: beige;
  margin: 5px 0;
  border: solid grey 2px;
}

.trigger {
  height: 100%;
  background: black;
  width: 50px;
  color: white;
  z-index: 30;
  position: relative;
}

.trigger,
.slider,
.display {
  height: 100%;
}

.units,
.slider {
  transition: all 250ms;
}

.units {
  z-index: 20;
  position: relative;
  padding: 5px;
}

.display {
  background: lightgreen;
  height: 100%;
  width: calc(100% - 175px);
}

var $slider = $('.slider')
var $units = $('.units');
var $display = $('.display');
var $wrapper = $('.wrapper');
$('.trigger').click(function() {
  var displayW;
  var sliderW;
  var unitsMargin;
  var wrapperW = $wrapper.width();
  var w = $slider.width();

  if (w === 50) {
    sliderW = "175px";
    unitsMargin = 0;
    displayW = wrapperW - 175 + "px";
  } else {
    sliderW = "50px";
    unitsMargin = "-175px";
    displayW = wrapperW - 60 + "px";
  }
  $units.css('margin-left', unitsMargin)
  $slider.css('width', sliderW);
  $display.css('width', displayW);
})

Answer 1

这真的很奇怪。我不完全确定原因，但是如果你向显示器添加一个匹配的过渡更改它可以工作：

.units,
.slider,
.display{
  transition: all 250ms;
}

https://jsfiddle.net/algorithmicMoose/pcsfk7te/6/

Answer 2

在else部分内部，最后添加以下代码片段。调整计时器。在直接添加margin-left：0时它不起作用，仅当我们先添加负边距然后将其更改为0时才能工作。

setTimeout(function(){ $display.css('margin-left', '-175px'); }, 100);
setTimeout(function(){ $display.css('margin-left', '0px'); }, 200);

滑动div在浮动div下

2 个答案: