一个封装js代码—–展开收起效果示例

我来给你详细讲解一下。

封装js代码展开收起效果

有时我们需要在网页中展示大段的文本内容，但是又希望页面不显得太长，可以通过展开/收起的方式来达到更好的用户体验。这里我们可以通过封装一段JS代码来实现展开收起效果。

HTML部分

首先，在HTML中需要编写展开/收起的按钮和展开/收起的区块。以下是一个简单的示例：

<div class="collapse-content">
  <p>这里是展开/收起的区块，可以放置大段的文本内容.</p>
  <p>如需展示更多内容，请点击下面的展开按钮：</p>
  <div class="collapse-toggle">展开</div>
</div>

其中，.collapse-toggle是展开/收起按钮的类名，.collapse-content是需要展开/收起的区块的类名。

CSS部分

接下来，我们需要在CSS中对展开/收起的区块样式进行设置，以及设置展开/收起按钮的样式。以下是一个简单的示例：

.collapse-content {
  margin-bottom: 20px;
  overflow: hidden;
  transition: all 0.5s;
  height: 100px;
}

.collapse-content .collapse-toggle {
  cursor: pointer;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px 10px;
  display: inline-block;
  margin-top: 10px;
}

其中，.collapse-content设置了区块的高度为100px，同时设置了动画效果，.collapse-toggle设置了按钮的样式。

JS部分

接下来是我们需要封装的JS代码部分。以下是封装展开/收起效果的完整代码：

function collapse(selector, maxHeight) {
  var element = document.querySelector(selector);
  var collapseToggle = element.querySelector('.collapse-toggle');

  var contentHeight = element.offsetHeight;
  element.style.height = maxHeight + 'px';

  collapseToggle.onclick = function () {
    if (element.offsetHeight == maxHeight) {
      element.style.height = contentHeight + 'px';
      collapseToggle.innerHTML = '收起';
    } else {
      element.style.height = maxHeight + 'px';
      collapseToggle.innerHTML = '展开';
    }
  }
}

这段代码会自动获取传入 selector 选择器的元素，并添加对应的展开/收起功能。其中，maxHeight 参数代表设置的最大高度，超出该高度后就会自动折叠。

示例

最后，我们来看两个具体的示例说明。

示例1

假设我们希望展示一篇长文章，但不希望页面显得过长。我们可以将文章封装在 .collapse-content 区块中，然后通过 collapse('.collapse-content', 200) 将展开/收起效果应用到该区块上。

HTML代码：

<div class="collapse-content">
  <p>这里是一篇长文章：...</p>
  <p>这里还有一些段落：...</p>
  <div class="collapse-toggle">展开</div>
</div>

JS代码：

collapse('.collapse-content', 200);

这样，展开效果将在区块高度超过200px时自动应用，用户可以通过点击展开/收起按钮在需要展示全部内容时进行展开，同时不会影响页面的美观性。

示例2

假设我们想将一段长代码封装在 .collapse-code 区块中，在不占用过多页面空间的前提下展示出来。我们同样可以使用 collapse('.collapse-code', 100) 来实现展开/收起效果。

HTML代码：

<div class="collapse-code">
  <pre><code>// 这里是一段长代码...</code></pre>
  <div class="collapse-toggle">展开</div>
</div>

JS代码：

collapse('.collapse-code', 100);

这样，当代码区块高度超过100px时，展开/收起效果将自动应用。用户可以在需要查看全部代码时点击展开按钮进行展开，同时不会占用过多页面空间。

总结

通过封装JS代码，我们可以实现展开/收起效果的功能，大大提升了网页的用户体验。具体实现方法为，在HTML中添加展开/收起的区块和按钮，在CSS中对区块和按钮设置样式，在JS中封装展开收起的功能。