0

私はその中にdivウィズを持っulています。ul不明な数の要素を含むことができます。各要素には、さまざまな量のコンテンツを含めることができます。長いテキスト行でも短いテキスト行でもかまいません。

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

ページDIVが読み込まれるときの高さは 100px を超えてはなりません。

私が達成したいこと: この DIV 内にコンテンツが多すぎてオーバーフローしている場合、ユーザーがクリックしてこの DIV を「開く」ことができるリンクを表示して、高さを増やしたいと考えています。

4

2 に答える 2

2

これにより、 の自然な高さが検出され、 の自然な高<div>さが現在の高さよりも大きい場合に、[その他...] リンクが自動的に生成されます<div>(すべてのコンテンツを表示するのに 100 ピクセルで十分な場合は表示されません)。のさまざまな高さに合わせて JavaScript を調整する必要はありません<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;
}
于 2013-01-29T12:28:19.907 に答える
0

私はあなたの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;
}

JavaScript :

  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';
  }
}
于 2013-01-29T12:35:32.697 に答える