我正在 Drupal 中建立一个站点。我想在 100% 和 200px 之间切换 div 元素的高度。我已经尝试过切换功能,但它不支持两个回调函数(在这种情况下很困惑)。
我尝试了检查 div 标签高度的标志,它将根据当前高度设置高度。因为,我有三个具有相同类的 div 标签,我希望这三个标签都具有这种切换功能,所以这个想法在这种情况下也失败了。
此外,当高度更改为 100% 时,它没有缓动效果,当高度更改为 200px 时,缓动效果起作用。
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;
}
查询:
$("#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");
}
);