Question

我正在编写（使用纯JavaScript =无JQuery）自定义控件，这是一个容器，当它们跨越多行并且只显示第一行时，它会折叠它的内容。当您单击控件中的按钮（向下箭头）时，容器会展开其所有内容。 如果内容只覆盖1行，则我根本不显示该按钮，并且它的行为与常规容器相同。

下面的两张图片显示控件折叠（上面一个）和展开（下面一个）。

Control collapsed

Control expanded

我面临的问题是如何知道何时显示按钮以及何时不知道=如何检测内容是多行还是仅跨越一行。我的方法是获得元素的高度，然后折叠它，看看高度是否改变了（如果它改变了，那么它必须是多线的）。

该方法的问题在于我的函数createCollapsingPanel()我创建的元素尚未附加到DOM - 该函数返回元素，该元素只会被附加到DOM（由下面的 Architecture 1 说明）。如果那只涉及1个函数，我当然可以在函数内部追加（ Architecture 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

你总是可以让内部容器成为多行，只需将其与外部容器一起剪切即可。

在外部容器上使用：

overflow: hidden
height: someValue中

关于内部容器的使用：

position: absolute
height: auto

将span放在内部容器中。

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

Answer 2

您可以在dom中使用隐藏容器来测量元素大小。隐藏的容器可以是dom中的简单div：

   ...
   <body>
      <div id="measurementContainer" style="display:none;"></div>

测量功能可以：

将元素附加到度量容器（div）
衡量元素
并将其从测量容器中再次移除

例如：

    function measureElementWidth(element) {
       var measurementContainer = document.getElementById(measurementContainer);
       measurementContainer.appendChild(element);

       var width = element.clientWidth;

       measurementContainer.removeChild(element);

       return width;
}

或者您可以使用MutationObservers并在元素添加到dom时收到通知。检查是否所有需要的浏览器support。

甚至更简单：只需在将元素追加到dom后调用大小调整函数。

根据高度隐藏溢出元素

2 个答案: