Question

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

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

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

Answer 1

这会检测<div>的自然高度，并在<div>的自然高度大于其当前高度时自动生成“更多...”链接（如果<div>的自然高度大于当前高度，则会自动生成“更多...”链接100px足以显示所有内容）。您无需针对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>'; } }的不同高度调整javascript。

DEMO

的Javascript

<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>

HTML

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

CSS

{{1}}

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;
}

javscript：

  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';
  }
}

显示链接以打开溢出的div

2 个答案: