切换高度的Div尺寸

问题描述：

我正在寻找一种简单的方法来将div扩展到固定的高度。这将是我的代码的基本骨架：切换高度的Div尺寸

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

：点击“更多”，我希望父DIV扩大到400像素的高度。再次点击“更多”（最好是“更少”），我希望父div调整回它的前身高（200px）。

不知何故，我在互联网上找不到任何工作。由于我是一个jQuery的绝对新手，我找不到这个错误...我认为一个问题可能是缺乏适当的元素识别，因为每个类在网站上使用多次...

感谢提前帮助你！

答

试试这个JSFIDDLE

HTML：

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

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"); 
    } 

});

非常感谢！目前为止效果很好。 – Nico 2013-04-10 22:36:38

我很抱歉再次打扰你：有没有办法限制jQuery对各个div所做的更改？当我有几个“父”类的div时，将会对每个div进行更改。但我只需要各自的股改... – Nico 2013-04-12 14:44:23

@尼科会发生什么？ – Anoop 2013-04-12 14:46:56

答

随着一些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它的行动。

答

我向您的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尺寸

相关推荐