1

我正在编写（使用纯 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 并为其计算浏览器样式后调用它？

附加问题

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

4

2 回答 2

2

你总是可以让内部容器是多行的，然后用外部容器夹住它。

在外容器上使用：

  • overflow: hidden
  • height:一些价值

在内容器上使用：

  • position: absolute
  • height: auto

将span' 放入内部容器中。

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

于 2015-06-10T16:43:10.640 回答
1

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

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

测量功能可以：

  1. 将元素附加到测量容器 ( div)
  2. 测量元素
  3. 并再次将其从测量容器中取出

例如：

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

       var width = element.clientWidth;

       measurementContainer.removeChild(element);

       return width;
}

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

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

于 2015-06-10T16:08:17.270 回答