[英]Sliding div goes under floating divs
I am trying to make a basic popup menu from the left. 我正在尝试从左侧创建一个基本的弹出菜单。 It works other than the fact that when I try to hide the menu, the main div ends up underneath the menu. 除了我尝试隐藏菜单外,主div都在菜单下方结束这一事实不起作用。 I'm not sure how this is happening. 我不确定这是怎么回事。
https://jsfiddle.net/pcsfk7te/2/ https://jsfiddle.net/pcsfk7te/2/
<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);
})
This is really weird. 这真的很奇怪。 I'm not totally sure why, but if you add a matching transition to the display change it works: 我不完全确定为什么,但是如果您向显示更改添加匹配的过渡,它将起作用:
.units,
.slider,
.display{
transition: all 250ms;
}
https://jsfiddle.net/algorithmicMoose/pcsfk7te/6/ https://jsfiddle.net/algorithmicMoose/pcsfk7te/6/
Inside the else part add the following code snippet at the end. 在else部分的内部,最后添加以下代码段。 Adjust the timer. 调整计时器。 On directly Adding margin-left: 0 its not working, its working only when we add negative margin first and then changing it to 0. 在直接添加margin-left:0上不起作用,仅当我们先添加负的margin然后将其更改为0时,它才起作用。
setTimeout(function(){ $display.css('margin-left', '-175px'); }, 100);
setTimeout(function(){ $display.css('margin-left', '0px'); }, 200);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.