Question

所以我想出了这个代码，可以在点击时更改元素的高度。

$("#container").height($("#content").height('80px'));

$('#show-1').click(function() {
    $("#container").height($("#content").height('auto')); 
});

$('#hide-1').click(function() {
    $("#container").height('99px').addClass("with-animation");    
});

它的工作方式与我想要的一样，但需要应用几个不同的article元素，每个元素都有自己的一组显示/隐藏链接。

我的问题是我可以弄清楚如何将相同的功能单独应用于多个元素，而不必为每个元素分别设置单独的功能。是否有某种方法可以通过id？请参阅我制作的JSFiddle，http://jsfiddle.net/kFUu7/1/。

Answer 1

这个怎么样，我已经更新了你的小提琴：http://jsfiddle.net/LVA9k/

我在主播上添加了“show”和“hide”类，并将代码更改为：

$("#container").height($("#content").height('80px'));

$('.show').click(function() {    
    $(this).parent().next("#container").show();
});

$('.hide').click(function() {    
    $(this).parent().next("#container").hide();    
});

Answer 2

我想你会想要以下内容。

http://jsfiddle.net/kFUu7/6/

HTML

<p><a class="show click-me" id="show-1">Show</a> | <a class="hide click-me" id="hide-1">Hide</a></p>
<div class="container">
    <div class="content">
        <h3>Some Random Text</h3>
        <p>Nibh minim vituperata ad duo, vix graece possim ne. Sonet alienum te pri, nam amet vidisse nonumes ei. Odio scripta signiferumque sed at, ad mucius abhorreant pri. Per eu fastidii qualisque definiebas, ea nec eirmod scribentur. Sea ut omnium suscipit, viderer dissentiunt et vix. Nibh minim vituperata ad duo, vix graece possim ne.</p>
        <p>Inani altera principes usu an, eos at congue</p>
     </div>
</div>
<p><a class="show click-me" id="show-2">Show</a> | <a class="hide click-me" id="hide-2">Hide</a></p>
<div class="container">
    <div class="content">
        <h3>More Random Text</h3>
        <p>Nibh minim vituperata ad duo, vix graece possim ne. Sonet alienum te pri, nam amet vidisse nonumes ei. Odio scripta signiferumque sed at, ad mucius abhorreant pri. Per eu fastidii qualisque definiebas, ea nec eirmod scribentur. Sea ut omnium suscipit, viderer dissentiunt et vix. Nibh minim vituperata ad duo, vix graece possim ne.</p>
        <p>Inani altera principes usu an, eos at congue dolorem corpora. Mei ne posse ocurreret, hinc tollit singulis in quo. Dico justo tincidunt no eos, id vim nisl facilisi. Nam id nisl maiorum perfecto, nam summo quando insolens ei. Te sed quis tation primis. In nec harum vituperata, eum minimum sensibus eu.</p>

    </div>
</div>

的Javascript

$(".container").height('80px');

$('.show').click(function() {
    var height = $(this).parent().next(".container").find(".content").outerHeight();
    $(this).parent().next(".container").animate({ height: height }, 500); 
});

$('.hide').click(function() {
    $(this).parent().next(".container").animate({ height: "99px" }, 500);
});

CSS

.container {
width: 500px;
height: auto;
max-height: 9999px;
overflow: hidden;
background: #BBBBBB;
}
.click-me { cursor: pointer; }

改变Div onclick的高度

2 个答案: