javascript - 根据高度 overflow hidden 元素

Question

我正在编写(使用纯 JavaScript = 无 JQuery)一个自定义控件，它是一个容器，当它们跨越多行并仅显示第一行时折叠其内容。单击控件中的按钮(向下箭头)时，容器会展开所有内容。 如果内容仅跨越 1 行，我根本不会显示按钮，它就像一个常规容器。

下面的 2 张图片显示控件折叠(上一张)和展开(下一张)。

我面临的问题是我如何知道何时显示按钮以及何时不显示按钮 = 如何检测内容是多行还是仅跨越一行。我的方法是获取元素的高度，然后折叠它并查看高度是否发生变化(如果发生变化，则它必须是多行的)。

该方法的问题在于我的函数 createCollapsingPanel() 中，我正在创建的元素尚未附加到 DOM - 该函数返回该元素，该元素只会被附加到 DOM(如下面的架构 1 所示)。如果那只涉及那 1 个函数，我当然可以在函数内部移动追加(架构 2 下面)。不幸的是，这就是我编写所有函数的方式(它们返回元素，然后才将这些元素附加到调用它们的外部函数中的父元素中)，因此这将意味着重写最终调用这个函数的其他父函数，总的来说我的整个功能架构。

---

架构 1

function createOuterElement() {
  var outerElement = document.createElement(...);

  outerElement.appendChild(createInnerElement());
  /* Do other things with outerElement */

  return outerElement;
}

function createInnerElement() {
  var innerElement = document.createElement(...);

  /* Do things with innerElement */

  return innerElement;
}

架构 2

function createOuterElement(parentElement) {
  var outerElement = document.createElement(...);

  parentElement.appendChild(outerElement);
  createInnerElement(outerElement);
  /* Do other things with outerElement */
}

function createInnerElement(parentElement) {
  var innerElement = document.createElement(...);

  parentElement.appendChild(innerElement);
  /* Do other things with innerElement */
}

---

主要问题

关于如何在我当前的架构(架构 1)中处理这个问题有什么想法吗？也许有一个事件我可以附加到控制元素，它会在元素插入 DOM 并为其计算浏览器样式后被调用？

附加问题

在 Architecture 1 中编写函数是否被认为是一种不好的做法？我对非基础 JavaScript 还很陌生，所以不确定什么是好的做法。

Answer 1

你总是可以让内部容器是多行的，然后将它与外部容器夹在一起。

在外容器上使用:

• 溢出:隐藏
• 高度:somevalue

关于内胆用途:

• position:absolute位置
• 高度:自动

将 span 放入内部容器中。

您现在可以独立于外部容器测量内部容器的高度。