只有在隐藏内容的情况下才使用jQuery来显示控件

Question

我想显示只有在发生溢出情况下才能滚动div内容的控件。我不确定我的语法正确 - 任何帮助，将不胜感激。

My JSFIDDLE

我的HTML

<div class="container"> 
    <div class="content"> 
     <div class="line-1">Line 1</div> 
     <div class="line-2">Line 2</div> 
     <div class="line-3">Line 3</div> 
     <div class="line-4">Line 4</div> 
     <div class="line-5">Line 5</div> 
     <div class="line-6">Line 6</div> 
     <div class="line-7">Line 7</div> 
     <div class="line-8">Line 8</div> 
     <div class="line-9">Line 9</div> 
    </div> 
    <div class="buttons"> 
    </div> 
</div> 
<div class="container"> 
    <div class="content"> 
     <div class="line-1">Line 1</div> 
     <div class="line-2">Line 2</div> 
     <div class="line-3">Line 3</div> 
     <div class="line-4">Line 4</div> 
     <div class="line-5">Line 5</div> 
     <div class="line-6">Line 6</div> 
    </div> 
    <div class="buttons"> 
    </div> 
</div> 

我的JavaScript

if ((".content").offsetHeight < (".content").scrollHeight) 
    { 
     $(".container .buttons").append("<button>Up</button><button>Down</button>"); 
    } 

我的CSS

.container 
    { 
     margin-bottom: 20px; 
    } 

.content 
    { 
     overflow: hidden; 
     height: 100px; 
     padding: 10px; 
     border: 1px solid #ccc; 
    } 

Answer 1

你在正确的轨道上，但也有一对夫妇事情你的代码错误：

1. (".content")无效代码，请务必使用jQuery来调用它：$('.content')。

2. offsetHeight和scrollHeight是原生JavaScript属性，因此您不能在jQuery对象上调用它们，但可以在本机HTML元素上调用它们。如果你想使用jQuery的语法，你可以写这样的：$(".content")[0].offsetHeight

3. 我在each块包裹一切，所以，并不是所有的按钮类获得一个更新时，仅有1容器四溢。

Here is a JSFiddle显示完整的解决方案。

同样值得注意的是，如果您需要在IE8以下支持，您可能会遇到兼容性问题as seen in this MDN document。

Answer 2

你可以这样做。

首先你需要从.content 删除height我们检查，如果.content是大于100如果是我们设置100px高度该div并添加按钮。

你JS会是这样

$(".content").each(function(){ 
    if($(this).height() > 100){ 
     $(this).css("height","100px"); 
     $(this).next(".buttons").append("<button>Up</button><button>Down</button>"); 
    } 
}); 

DEMO