max-height 阅读更多不尊重 css 的 0px

Question

我正在努力写一篇阅读更多。它在大多数情况下都有效，除了应该完全关闭的 Div 仍然显示第一行文本。

我做了一个codepen https://codepen.io/justinblayney/pen/JjpZeJK

有点复杂，在移动视图中，5 divs 需要隐藏在阅读更多切换开关后面，在桌面视图中，它们始终可见，但我使用的布局完全不同 css 网格来完成（这就是为什么我不将它们包装成一个 div）。

如果你查看我上面的 link，请确保你在 768px 以下，你会在底部看到

设备兼容性

可用的国家/地区

成立年份

在

获得许可

支持

应该只显示“阅读更多”，其余的应该在切换时打开，但显示的是标题 (strong)，只有内容 (span) 是隐藏的。我希望在切换之前隐藏标题和内容。

下面都有代码，但不是0px

max-height: 0px;
overflow: hidden;
transition: max-height 0.2s ease-out;

Answer 1

问题是 overflow: hidden 没有隐藏您的填充 - 您需要在隐藏时从 div 中删除填充，并在它们呈现时将其添加回去

您可以这样做（演示的 ln 121）：

&__desktop, &__mobile, &__payout, &__currency, &__banking, &__platforms, &__countries, &__established, &__licensed, &__support, &__readmore {
        //...
        
        &.active {
                padding: 0px 40px 20px 40px;
        }

        // ....
}

旁白：如果你想简化你的 JS，这里是一个起点：

const accordionEls = document.getElementsByClassName("accordion");

// add an event listener to each element, using a named function definition
Array.from(accordionEls).map(element => {
  element.addEventListener("click", toggleVisibility)
});

function toggleVisibility(event) {
  // get the element that the event was attached to out of the event object
  const { currentTarget } = event;
  // generate .review_page__ classnames
  const classNames = [
    "platforms",
    "countries",
    "licensed",
    "support",
    "established"
  ].map(name => `.review_page__${name}`);
  // get the elements with those class names, filtering any null
  // values out of the list
  const toggleElements = classNames
    .map(className => document.querySelector(className))
    .filter(Boolean);

  // set the .active class on the read more button
  currentTarget.classList.toggle("active");

  // loop over each element, switching its max height
  toggleElements.map(el => {
    const currentMaxHeight = el.style.maxHeight;
    const maxHeight = currentMaxHeight ? null : `${el.scrollHeight}px`;

    el.style.maxHeight = maxHeight;
  });
}

max-height 阅读更多不尊重 css 的 0px

max-height for read more is not respecting 0px from css

html

javascript

css

sass