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

使用一些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的实际操作。

Answer 3

我在HTML中添加了一个较少的元素，以便父文件在展开后可以折叠。

<强> 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/

切换Div大小的高度

3 个答案: