问题描述
这是一个非常简单的 ：
function hideDiv2() { $('.div2').hide(); } function showDiv2() { $('.div2').show(); }
.div1 { height: 300px; width: 20%; background-color: red; float: left; } .div2 { height: 300px; width: 20%; background-color: green; float: left } .div3 { height: 300px; width: 35%; background-color: pink; float: left }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="div1">div1</div> <div class="div2">div2</div> <div class="div3">div3</div> <br> <div style="clear:both"></div> <button type="button" onclick="hideDiv2()" name="hide">Hide div2</button> <button type="button" name="show" onclick="showDiv2()">Show div2</button>
在HTML中创建3个div，并提供两个按钮来隐藏和显示中间div。 我想知道的是当div2被隐藏时，我如何防止div3向左滑动。 换句话说，无论div2是隐藏还是可见，我都希望div3保持在原始位置。 但是，需要显示初始HTML页面，其中所有3个div都可见，如jsFiddle中最初所示。
1楼
developerbmw
8
2015-07-17 01:21:24
而不是使用.hide() ，将opacity设置为0 ，或将visibility设置为hidden
$('.div2').css('visibility', 'hidden');
注意：不透明度在IE <9中不起作用
2楼
Target
2
2015-07-17 02:00:52
通过添加外部div，您可以实现您所寻找的目标。 这是你的代码和
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
.div1 {
height:300px;
width:20%;
background-color: red;
float:left;
}
.div2 {
height:300px;
width:100%;
background-color: green;
float:left
}
.hideDiv {
height:300px;
width:20%;
float:left
}
.div3 {
height:300px;
width:35%;
background-color: pink;
float:left
}
</style>
<meta charset="ISO-8859-1">
<title>Test</title>
</head>
<body>
<div class="div1">div1</div>
<div class ="hideDiv"><div class="div2">div2</div></div>
<div class="div3">div3</div>
<br>
<div style="clear:both"></div>
<button type="button" onclick="hideDiv2()" name="hide">Hide div2</button>
<button type="button" name="show" onclick="showDiv2()" >Show div2</button>
</body>
<script>
function hideDiv2()
{
$('.div2').hide();
}
function showDiv2()
{
$('.div2').show();
}
</script>
</html>