切换div高度

时间:2012-04-27 05:39:23

标签: jquery drupal-7

我正在Drupal建立一个网站。我想在100%和200px之间切换div元素的高度。我尝试过切换功能,但它不支持两个回调函数(在这种情况下很困惑)。

我尝试过检查div标签高度的标志,然后根据当前高度设置高度。因为,我有三个具有相同类的div标签,我想在这三个中都有这个切换功能,所以在这种情况下这个想法也失败了。

此外,当高度变为100%时,它会发生缓和效果,当高度变为200px时,缓和效果会起作用。

1 个答案:

答案 0 :(得分:1)

HTML:

<div class="target"> Hi </div>
<div class="target"> Hi 2</div>
<div class="target"> Hi 3</div>
<a href="#" id="button">Button</a>

CSS:

.target {
    width: 100px;

}
.someClass {
    background: #f00;
}

JQUERY:

$("#button").click(function(){
    $("div.target").toggleClass("someClass",100);
    return false;
});

如果这对你不够好,请检查一下这个,并带有缓动效果: http://jsfiddle.net/6FwUf/4/

编辑: 我修改了您的代码,尝试这样做:

$("a.artist-page-read-more").toggle(
     function() {
         $(this).parents("div.panel-pane").siblings("div.panel-pane.pane-entity-field").find("div.field-items").animate({height: "100%"}, "slow");
     },
    function(){
         $(this).parents("div.panel-pane").siblings("div.panel-pane.pane-entity-field").find("div.field-items").animate({height: "200px"}, "slow");
       }   
   );