Javascript 重构jquery动画

我正在使用来自的datepicker插件-示例位于页面底部

它使用jquery animate（）的方式如下：

$('#widgetField>a').bind('click', function(){
    $('#widgetCalendar').stop().animate({height: state ? 0 : $('#widgetCalendar div.datepicker').get(0).offsetHeight}, 500);
    state = !state;
    return false;
}); 

我需要一个关于如何重构成一个类似手风琴的扩展div的建议。我不希望日历浮动，我需要它将div内容向下推

---

建议？

更新答案

小部件浮动是因为它有一个位置：绝对；以及jquery函数中的高度偏移

请参见css：

#widgetCalendar

有一个样式，位置：绝对。您将需要删除它，这将使其正常工作，但还有一些额外的样式问题，这些问题都可以通过css调整来解决

或者，您可以尝试使用jQuery.slidedown：

 $('#widgetCalendar').slideDown();

这样就不需要高度偏移

如果你能做一个jsfiddle，那就太好了，因为我无法在没有看到你在做什么的情况下进行测试

已编辑-用户未使用jQuery UI

这是由于jQueryUI的性质——日历是一个专门的对话框。jqueryui对话框是一个popin。但是，你可以抵消这一点：

<script>
$(function() {
    $( "#datepicker" ).datepicker();
});
</script>

$（函数（）{
$（“#日期选择器”）.datepicker（）；
});

---

显示嵌入在页面中而不是覆盖中的日期选择器。只需对div而不是输入调用.datepicker（）。

您是否已登录jquery ui-将为您提供本机datepicker和accordion扩展div谢谢您的推荐！我看到了完全相同的问题。我不能使用浮动div。直接位于日历下方的内容需要向下推。。。。该日历上的z-索引也会使其浮动…重新标记为css，这是此处的主要问题Alonisser-动画不创建这样做的css吗？还是我错了？你能发布你页面的html吗？我认为我们不完全理解你的问题。特别是页面相关部分的html和css。是的，这是一个css问题。这与小部件css和cssNope下面的div有关。。。arrrggg:D可能需要把它放在jfiddle里给你。。。但这本身就很有挑战性。@chrislovecnm如果你能把它放在提琴里，那就太好了——或者给你使用它的页面一个链接，我最终把它作为一个平面日历，放在一个div中，我显示隐藏。