` Immer wenn ich ein verschachteltes zusammenklappbares Element erweitere, wird die Sichtbarkeit des übergeordneten Elements nicht korrekt berechnet. Einige verschachtelte Inhalte fehlen auf dem Bildschirm
Dies ist der HTML-Code und der JS-Code zur Handhabung der Scrollhöhe
// Get all collapsible buttons
const collapsibles = document.getElementsByClassName('collapsible');
// Add click event listener for each collapsible
for (let i = 0; i < collapsibles.length; i++) {
collapsibles[i].addEventListener('click', function() {
this.classList.toggle('active');
const content = this.nextElementSibling;
if (content.style.maxHeight) {
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + 'px';
}
// Get all nested collapsible buttons within this collapsible
const nestedCollapsibles = content.getElementsByClassName('nested-collapsible');
// Loop through nested collapsibles and expand or collapse them accordingly
for (let j = 0; j < nestedCollapsibles.length; j++) {
const nestedContent = nestedCollapsibles[j].nextElementSibling;
if (this.classList.contains('active')) {
if (!nestedContent.style.maxHeight) {
nestedContent.style.maxHeight = nestedContent.scrollHeight + 'px';
content.style.maxHeight = (parseInt(content.style.maxHeight) + nestedContent.scrollHeight) + 'px'; // Add nested collapsible's scroll height to parent collapsible's scroll height
} else {
nestedContent.style.maxHeight = null;
content.style.maxHeight = (parseInt(content.style.maxHeight) - nestedContent.scrollHeight) + 'px'; // Subtract nested collapsible's scroll height from parent collapsible's scroll height
}
}
}
});
}
.active {
color:blue;
}
<div id="HotLikeMiami">
<div class="HLM">
<div class="HLMRow">
<div class="HLMTitle">
<h1 class="sub-title">Fantastic League</h1>
</div>
<div class="HLMImg">
<img src="fantasticLeague.png">
</div>
<div class="HLMDetails">
<p>A 2D Top Down Shooter game which heavily focuses on Enemy AI. I have made an attempt to build this project from ground up. I have used SFML for rendering shapes and textures, the rest is made from scratch. The project involves the integration
of complex enemy AI. A simple Data-Oriented Design approach has been followed in this project for handling different events and messages by the enemies. </p>
</div>
<div class="MyContibution">
<button class="collapsible">My Contribution</button>
<div class="ContributionContent">
<p>Got a lot of contribution</p>
<button class="collapsible nested-collapsible">My Contribution</button>
<div class="ContributionContent">
<p>1. This process involves the development and integration of states like Game Menu, Splash Screen, InGame, Game Over etc states. These states are fetched with delta time which is calculated from the Game Loop. 2. This stage also includes
the development of Asset Manager, Input Manager etc</p>
</div>
<button class="collapsible nested-collapsible">My Contribution</button>
<div class="ContributionContent">
<p>1. This process involves the development and integration of states like Game Menu, Splash Screen, InGame, Game Over etc states. These states are fetched with delta time which is calculated from the Game Loop. 2. This stage also includes
the development of Asset Manager, Input Manager etc</p>
</div>
<button class="collapsible nested-collapsible">My Contribution</button>
<div class="ContributionContent">
<p>1. This process involves the development and integration of states like Game Menu, Splash Screen, InGame, Game Over etc states. These states are fetched with delta time which is calculated from the Game Loop. 2. This stage also includes
the development of Asset Manager, Input Manager etc</p>
</div>
</div>
</div>
</div>
</div>
</div>```
</kbd>
Ich brauche Hilfe bei Berechnungen und was die Sichtbarkeit beeinflusst
Ich möchte, dass alle Nester unabhängig sind und dass sie bei jeder Erweiterung die Höhe der übergeordneten Sichtbarkeit erhöhen Hier wird die letzte Verschachtelung abgeschnitten:
我已经修改了您的代码，以便能够在动态高度和响应能力下正常工作。
先检查一下您是否正在展开或折叠。我们可以通过获取
classList.toggle的结果来弄清楚这一点，如果添加了类，则为true，如果删除，则为false。 p>我在每个
ContributionContent内部添加了一个包装器。该包装器将负责计算内部内容的总高度。这是必需的，因为ContributionContent的高度会波动。监听
transitionend事件，将最大高度设置为none。仅当手风琴展开时才设置高度。关闭0px时应予以尊重。由于展开时最大高度设置为
none，因此我们必须使用双请求动画帧（Double RAF）才能首先设置高度，然后过渡到0px关闭时。这是一种在渲染发生后执行任务的（hacky）技术。请参阅有关 Double RAF 的此帖子。// Get all collapsible buttons const collapsibles = document.querySelectorAll('.collapsible'); // Add click event listener for each collapsible. for (const collapsible of collapsibles) { collapsible.addEventListener('click', function(event) { const button = event.target; const isExpanding = button.classList.toggle('active'); const content = button.nextElementSibling; const wrapper = content.firstElementChild; // Get the calculated height of the wrapper. const { height } = wrapper.getBoundingClientRect(); content.style.maxHeight = height + 'px'; // Remove max height after an exapnding transition. content.addEventListener('transitionend', () => { if (isExpanding) { content.style.maxHeight = 'none'; } }, { once: true }); // Hack to force a closing transition. if (!isExpanding) { requestAnimationFrame(() => { requestAnimationFrame(() => { content.style.maxHeight = '0px'; }); }); } }); }.active { color: blue; } .collapsible + * { display: grid; /* This forces the wrapper to account for the margins. It avoids a jump. */ overflow: hidden; transition: max-height 500ms ease-out; }作为结束语。 W3Schools 有很多很好的例子，但众所周知它们已经过时了。寻找示例时，请了解他们的年龄以及他们是否使用最新的做法。