jquery - 检查div是否溢出

Question

我想检查一个<div>有溢出并显示链接(如果有)。我有三个具有相同类的 div。我想检查每个 div 是否溢出并显示或隐藏链接。这是我的 HTML:

<div id="tab-1" class="tab-panel active" >
  <div>
    LETO 2015: ALNJA
    <br>
    <br>
    Alanja - grad sa mnogo različitih lica. Ovaj grad, smešten u istočnom delu turske obale, 
  </div>
  <a id="morelink">more</a>
</div>
<div id="tab-2" class="tab-panel">
  <div>
    Alanja - grad sa mnogo različitih lica. Ovaj grad, smešten u istočnom delu turske obale, 
  </div>
  <a id="morelink">more</a>
</div>
<div id="tab-3" class="tab-panel">
  <div>
    Alanja - grad sa mnogo različitih lica. Ovaj grad, smešten u istočnom delu turske obale, 
  </div>
  <a id="morelink">more</a>
</div>`

CSS:

  .tab-panel {
   position:relative;
   background-color: #f8f8f8;
   color: #000;
   height: 276px;
   line-height: 20px;
   padding:20px;
  }
 .tab-panel div {overflow: hidden;height: 100%;}

Answer 1

编辑:我对这个答案进行了多次更新。原来的那个不符合 OP 的需要，因为不是所有的 div 元素都同时可见(见评论)。我将首先回答一般性问题:“如何检查 div 是否溢出？”，然后解决 OP 问题。

注意:我已经修改了原来的 html 和 css 以使示例清晰。

---

所以我们有一个称为“tab”的容器(一个div 元素)。它内部还有其他 div，我们称之为“内容”。如果 'content' 大于 'tab'，则 'tab' 溢出。

关键是比较scrollHeight和 clientHeight “内容”的属性。

如果 scrollHeight 大于 clientHeight，我们更改链接的 display 属性以使其可见。我们使用 id 选择器来识别“内容”。

HTML:

<div id="tab"> <div id="content">...</div> </div>

JS:

if ($('#content').prop('scrollHeight') > $('#content').prop('clientHeight'))
    //if 'true', the content overflows the tab: we show the hidden link
    $('#myLink').css('display', 'block');
}

如果我们有多个“选项卡”会怎样？

在这种情况下，我们需要使用 each 函数来包装上面的代码并迭代不同的“选项卡”:

HTML:

<div class="tab"> <div class="content">...</div> </div>
<div class="tab"> <div class="content">...</div> </div>
...

JS:

$('.tab').each( function() {
    if ($('.content', this).prop('scrollHeight') > $('.content', this).prop('clientHeight'))
    $('a', this).css('display', 'block');
});

请注意我们现在如何使用类选择器并在this 的上下文中搜索元素。

解决OP问题

在这种情况下，只有一个“选项卡”是可见的，而其他选项卡是隐藏的，直到用户引发更改可见性的事件。

我们无法比较隐藏元素的 scrollHeight 和 clientHeight 属性(两者都将返回 0)。所以我们需要在事件的处理程序中进行比较，使其可见。

以下代码段处理了这种情况。

function updateTabs()
{
  $('.tab-panel').each( function() {
    if ($('div', this).prop('scrollHeight') > $('div', this).prop('clientHeight'))
      $('a', this).css('display', 'block');
  });
}

$('span').click( function() {
  $('.tab-panel').removeClass('active');
  $('#'+$(this).data('tab')).addClass('active');
  updateTabs();
});

updateTabs();

span {
  border: 1px solid blue;
  padding: 3px;
}

.tab-panel {
  background-color: #eee;
  height: 76px;
  padding: 30px;
  display: none;
}

.tab-panel.active {
  display: block;
}

.tab-panel div {
  overflow: hidden;
  height: 100%;
  border: 1px solid red;
}

.show-more {
  display: none;
  margin: 5px;
  border: 1px solid blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<span data-tab="tab-1">Tab 1</span>
<span data-tab="tab-2">Tab 2</span>
<span data-tab="tab-3">Tab 3</span>
<hr>

<div id="tab-1" class="tab-panel active">
  <div>
    I have a lot of text.
    <br>I have a lot of text.
    <br>I have a lot of text.
    <br>I have a lot of text.
    <br>I have a lot of text.
    <br>
  </div>
  <a class="show-more">more</a>
</div>

<div id="tab-2" class="tab-panel">
  <div>
    I have little text.
    <br>
  </div>
  <a class="show-more">more</a>
</div>

<div id="tab-3" class="tab-panel">
  <div>
    I have a lot of text.
    <br>I have a lot of text.
    <br>I have a lot of text.
    <br>I have a lot of text.
    <br>I have a lot of text.
    <br>
  </div>
  <a class="show-more">more</a>
</div>

此外，请注意，您的代码存在一个问题，即所有链接 都具有相同的id，morelink 应该是类(或具有不同的名称)。