切换 div 高度答案

【问题标题】：toggle div height切换 div 高度
【发布时间】：2012-04-27 05:39:22
【问题描述】：

我正在 Drupal 中建立一个站点。我想在 100% 和 200px 之间切换 div 元素的高度。我已经尝试过切换功能，但它不支持两个回调函数（在这种情况下会混淆）。

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

此外，当高度更改为 100% 时，它不会出现缓动效果，当高度更改为 200px 时，缓动效果会起作用。

【问题讨论】：

你能发布你的代码/切换功能吗？
为了便于理解，我简化了以上两个代码。这是实际代码：jsfiddle.net/KLEbe/1 jsfiddle.net/Z4Z8D/5
尝试将.css()改为使用.animate()
@rkw 你能说清楚点吗？

标签： jquery drupal-7

【解决方案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");
       }   
   );

【讨论】：

您能否在 jsfiddle 上设置您的代码的工作示例？因为我不明白为什么 2 个函数不适合你。