只有在隱藏內容的情況下才使用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