使用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. I将所有内容都包装在一个overflowing.

块中，这样当只有一个容器为jQuery时，并不是所有的each类都会得到更新

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

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

Answer 2

你可以这样做。

首先，您需要从.content中删除height，我们检查.content是否大于100，如果大于，则将100px高度设置为div和append按钮。

您的JS将如下所示

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