jquery - 切换 Div 大小的高度

Question

我正在寻找一种将 div 扩展到固定高度的简单方法。这将是我的代码的基本框架：

<div class="parent">
    <div class="child">
        Lorem Ipsum
    </div>
    <div class="bar">
        <a class="more" href="#">More</a>
   </div>
</div>

单击“更多”，我希望父 div 扩展到 400px 的高度。再次单击“更多”（最好是“更少”），我希望父 div 调整回原来的高度（200px）。

不知何故，我在互联网上找到的任何东西都不起作用。而且由于我是 jQuery 的绝对新手，我找不到错误...我认为问题可能是缺乏正确的元素识别，因为每个类在网站上都使用了多次...

提前感谢您的帮助！

Answer 1

试试这个JSFIDDLE

html:

   <div class="parent">
    <div class="child">
        Lorem Ipsum
    </div>
    <div class="bar">
        <a class="more" href="#">More</a>
   </div>
</div>

js

    var div = $("div.parent");
$("a.more").click(function(){
    if($(this).text().toLowerCase() == "more"){
        div.animate({height:400}, 500);
        $(this).text("Less");   
    }            
    else{
       div.animate({height:200}, 500);
         $(this).text("More");   
    }

});

Answer 2

我在您的 HTML 中添加了一个 less 元素，以便父级在展开后可以折叠。

HTML

<div class="parent">
    <div class="child">
        Lorem Ipsum
    </div>
    <div class="bar">
        <a class="more" href="#">More</a>
        <a class="less" href="#">Less</a>
   </div>
</div>

CSS

.less{
    display: none;
}

Javascript

var originalHeight = $(".parent").height();
$(".more").click(function(e){
   toggle(this,400, ".less");
   e.preventDefault();
});

$(".less").click(function(e){
   toggle(this,originalHeight, ".more");
   e.preventDefault();
});

function toggle(element, height, toggleClass){
   $(element).parents(".parent").animate({"height":height + "px"},1000);
   $(element).hide();
   $(toggleClass).show();
}

工作示例：http: //jsfiddle.net/bsF6V/1/

Answer 3

随着一些CSS的版本：

.parent.large {
    height: 400px;
}

您可以使用以下 JavaScript：

var $parent = $('.parent');

var $link = $('.more').click(function(e) {
    e.preventDefault();
    if ($parent.hasClass('large')) {
        $parent.removeClass('large');
        $link.text('More');
    } else {
        $parent.addClass('large');
        $link.text('Less');
    }
});

这是它的一个jsfiddle。