这里有一个可折叠部分的列表。当一个部分打开时，它需要向上移动（改变高度），这样它上面的元素会移动，而下面的元素不会移动。注意，上面的元素溢出是可以接受的。
不能使用absolute，因为它不会将元素推到它上面。还要注意，打开时部分内容的高度是动态的，并且是未知的。
默认情况下，当一个部分的内容被设置为关闭时不显示，打开时不显示，但它会移动它下面的部分。
有没有其他方法可以改变方向？
尝试在显示要打开的部分的内容时将位置设置为absolute，但这不是一个解决方案。
下面的代码片段仅供参考。真实的的应用程序是在react中，但功能是相同的。
打开中间部分应移动第一部分，而不是最后一部分
const allCollapsibleSections = document.querySelectorAll('[data-js="collapsible-section"]')
const setIsOpenFunctions = [];
allCollapsibleSections.forEach((collapsibleSection, index) => {
const openCloseButton = collapsibleSection.querySelector('button');
const section = collapsibleSection.querySelector('section');
let open = section.getAttribute('open') || false;
const renderSection = ()=>{
if(open){
section.style.display = 'unset';
return;
}
section.style.display = 'none';
}
const toggleIsOpen = () => {
open = !open;
renderSection();
}
renderSection();
setIsOpenFunctions[index] = toggleIsOpen;
openCloseButton.addEventListener('click', ()=>{
setIsOpenFunctions[index]();
});
})<div>
<div style="display: flex; flex-direction: row;" data-js="collapsible-section">
<button>Open/Close</button>
<section style="background: yellow; height: 50px">
This is a section
</section>
</div>
<div style="display: flex; flex-direction: row;" data-js="collapsible-section">
<button>Open/Close</button>
<section style="background: yellow; height: 50px">
This is a section
</section>
</div>
<div style="display: flex; flex-direction: row;" data-js="collapsible-section">
<button>Open/Close</button>
<section style="background: yellow; height: 50px">
This is a section
</section>
</div>
</div>
1条答案
按热度按时间42fyovps1#
看起来这是一个XY问题，尝试的解决方案并不是问题的唯一解决方案。
所以一个解决方案是，而不是旨在移动上面的元素，父元素应该有一个最大高度，并可滚动，当一个部分被打开，只是滚动到该部分。