중첩된 접이식 가시성 문제

Question

` 중첩된 접이식 항목을 확장할 때마다 상위 항목의 가시성이 올바르게 계산되지 않습니다. 일부 중첩된 콘텐츠가 화면에서 누락되었습니다

스크롤 높이를 처리하는 html 코드와 js 코드입니다

으아악 으아악 으아악

계산 및 가시성에 영향을 미치는 요소에 대한 도움이 필요합니다

모든 둥지가 독립적이기를 원하며 확장될 때마다 상위 가시성 높이가 증가합니다. 여기서 마지막 중첩이 잘립니다.

---

Answer 1

동적 높이와 반응성이 제대로 작동하도록 코드를 수정했습니다.

먼저 확장 또는 축소 여부를 확인하세요. classList.toggle 的结果来弄清楚这一点，如果添加了类，则为 true，如果删除，则为 false。p>를 통해 받으실 수 있습니다.

내 고도는 ContributionContent 内部添加了一个包装器。该包装器将负责计算内部内容的总高度。这是必需的，因为 ContributionContent마다 변동됩니다.

모니터링할 때는 존중하세요 transitionend 事件，将最大高度设置为 none。仅当手风琴展开时才设置高度。关闭 0px.

확장 시 최대 높이가 none로 설정되어 있으므로 Double Request Animation Frame(Double RAF)을 사용하여 먼저 높이를 설정한 다음 닫을 때 0px로 전환해야 합니다. 이는 렌더링이 발생한 후 작업을 수행하는 (해키) 기술입니다. Double RAF에 대한 이 게시물을 참조하세요.

으아악 으아악 으아악

결론적으로. W3Schools에는 훌륭한 사례가 많이 있지만 너무 오래되었습니다. 사례를 찾을 때 얼마나 오래되었는지, 최신 사례를 사용하는지 확인하세요.