我在容器 div 中有一个标题 div 和一个隐藏的弹出 div。
当我点击一个按钮时，我想切换弹出 div 的不透明度和宽度，以便它扩展到位，我希望标题 div 缩小。
目前，它正在做的是导致标题 div 下拉到弹出 div 下方，进入一些段落文本。
如何限制标题 div 以保留其顶部/左侧坐标，但缩小/扩大其宽度/高度？
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
overflow: hidden;
}
#popup {
position: relative;
top: -3px;
background: #e8e8e8;
margin: 3px 10px;
padding: 10px;
width: 250px;
height: 80px;
display: none;
float: right;
-moz-border-radius: 15px;
border-radius: 15px;
border: 1px solid #000;
}
#heading {
position: relative;
top: -3px;
font-size: 1.5em;
min-width: 50px;
height: auto;
overflow: auto;
margin: 3px;
float: left;
}
.button {
margin: 3px;
width: 120px;
height: 40px;
color: #fff;
background: #cc0066;
text-align: center;
vertical-align: middle;
line-height: 40px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.container {
margin: 3px 3px;
padding: 5px;
width: 550px;
height: 460px;
border: 1px solid #000;
}
</style>
<script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
</head>
<body>
<div class='container'>
<div id="popup">Here is a new section that appears</div>
<div id="heading">This Is Heading Text In Collapsable Div</div>
<br/>
<br/>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mattis in magna eu faucibus. Vestibulum vel fringilla diam. Nulla eget posuere massa. Pellentesque fringilla sapien in rutrum gravida. Phasellus sapien ligula, sagittis sed tellus vitae, semper feugiat nulla. In fermentum, elit eget ornare mattis, mi elit pretium arcu, eget cursus augue velit ac leo. In hendrerit justo eu metus adipiscing, sit amet venenatis sem elementum. Vivamus quis turpis sed elit ultrices molestie. Ut tincidunt, felis eget varius elementum, ante dui semper sapien, quis iaculis ligula urna at neque. In euismod, diam ultrices gravida hendrerit, augue mi luctus dolor, non accumsan purus risus non massa. Sed eget elementum odio. Morbi laoreet magna ac purus venenatis porttitor. Donec et augue a lacus consequat eleifend. Sed fringilla magna et posuere auctor. Donec vel hendrerit nibh. In feugiat dapibus risus eu porta.</p>
<div class="button">Click Me</div>
</div>
<script>
$(".button").click(function() {
$("#popup").animate({
width: "toggle",
opacity: "toggle"
}, "slow");
});
</script>
</body>
</html>
最佳答案
不确定我是否完全理解你想要什么，但我会拍摄。考虑将标题和段落文本放在同一个 <div> 中，像这样:
<div class='container'>
<div id="popup">Here is a new section that appears</div>
<div>
<h1>This Is Heading Text In Collapsable Div</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mattis in magna eu faucibus. Vestibulum vel fringilla diam. Nulla eget posuere massa. Pellentesque fringilla sapien in rutrum gravida. Phasellus sapien ligula, sagittis sed tellus vitae, semper feugiat nulla. In fermentum, elit eget ornare mattis, mi elit pretium arcu, eget cursus augue velit ac leo. In hendrerit justo eu metus adipiscing, sit amet venenatis sem elementum. Vivamus quis turpis sed elit ultrices molestie. Ut tincidunt, felis eget varius elementum, ante dui semper sapien, quis iaculis ligula urna at neque. In euismod, diam ultrices gravida hendrerit, augue mi luctus dolor, non accumsan purus risus non massa. Sed eget elementum odio. Morbi laoreet magna ac purus venenatis porttitor. Donec et augue a lacus consequat eleifend. Sed fringilla magna et posuere auctor. Donec vel hendrerit nibh. In feugiat dapibus risus eu porta.</p>
</div>
<div class="button">Click Me</div>
</div>
关于jquery - CSS Div 可以在另一个 Div 设置动画时缩小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17324364/