要展开带内容的 div,同时不移动下方元素,可以使用 CSS 的 position 属性来实现。具体的解决方法如下:
.container {
position: relative;
}
.content {
display: none;
position: absolute;
top: 100%;
/* 这里可以根据实际需求来设置内容展开的方式和样式 */
}
var container = document.querySelector('.container');
var content = document.querySelector('.content');
container.addEventListener('click', function() {
if (content.style.display === 'none') {
content.style.display = 'block';
} else {
content.style.display = 'none';
}
});
以上代码中,我们给父容器 container 设置了相对定位(position: relative),然后给要展开的内容 content 设置了绝对定位(position: absolute),并且设置了 top 属性为 100%,这样 content 就会位于父容器底部的下方。
然后使用 JavaScript 给 container 添加点击事件监听器,当点击 container 时,如果 content 的 display 属性为 none,则将其改为 block,即展开内容;如果 display 属性已经是 block,则改为 none,即折叠内容。
这样就可以实现点击 container 时展开或折叠内容,而不会影响下方元素的位置。
下一篇:不移动元素的情况下计算网格项。