javascript - 显示链接以打开溢出的 div

Question

我有一个div里面ul。ul可以包含未知数量的元素。每个元素可以包含不同数量的内容。它可以是长或短的文本行。

示例：http ://codepen.io/anon/pen/Augrd

这DIV在页面加载时的高度不应超过 100px。

我想要实现的目标：如果这个 DIV 里面的内容太多并且溢出了，那么我想显示用户可以单击并“打开”这个 DIV 的链接，使它的高度更高。

Answer 1

这会检测您的自然高度，并在自然高度大于其当前高度<div>时自动生成“更多...”链接（如果 100px 足以显示所有内容，则不会显示一个）。<div>您不必针对不同高度的<div>.

演示

Javascript

var main = document.getElementById("main");
var original_height = main.offsetHeight;
main.style.height = 'auto';
var natrual_height = main.offsetHeight;
main.style.height = original_height+"px";;
var more = document.getElementById("more");
if (natrual_height > original_height) {
  more.innerHTML = '<a href="javascript:void(0)" onClick="show_more()">More...</a>';
}
function show_more() {
  if (main.offsetHeight < natrual_height) {
      main.style.height = 'auto';
      more.innerHTML = '<a href="javascript:void(0)" onClick="show_more()">Less...</a>';
  } else {
      main.style.height = original_height+"px";;
      more.innerHTML = '<a href="javascript:void(0)" onClick="show_more()">More...</a>';
  }
}

HTML

<div id="main" class="main">
<ul>
  <li>Something</li>
  <li>LoremLoremLoremLoremLoremLoremLorem</li>
  <li>Ipsum</li>
  <li>1234</li>
 <li>LoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLorem</li>
  <li>5678</li>
  <li>111111</li>
  <li>abc</li>
</ul>
</div>
<div id="more">

</div>

CSS

.main {
  height: 100px;
  overflow: hidden;
}

Answer 2

我已经更新了你的 html 并放了一些 javascript。我希望这个对你有用。

html：

<div class="main">
<div id="ulist">

  <ul>
  <li>Something</li>
  <li>LoremLoremLoremLoremLoremLoremLorem</li>
  <li>Ipsum</li>
  <li>1234</li>
 <li>LoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLorem</li>
  <li>5678</li>
  <li>111111</li>
  <li>abc</li>
</ul>
  </div>
  <div id='more' onclick="opendiv()">
    open
  </div>
</div>

CSS：

.main {
  height: 100%;
  overflow: hidden;
}
#ulist {
  height: 100px;
  overflow: hidden;
}

脚本：

  function opendiv()
{
  if(document.getElementById('more').innerHTML == 'open')
  {
  document.getElementById('ulist').style.height = '100%';
  document.getElementById('more').innerHTML = 'close';
  }
  else
  {
  document.getElementById('ulist').style.height = '100px';
  document.getElementById('more').innerHTML = 'open';
  }
}