重构jquery动画

我使用here的datepicker插件 - 示例位于页面的底部。重构jquery动画

它利用jQuery的动画（）这样的：

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

我需要如何重构成手风琴状扩张DIV此操作的建议。我不希望日历浮动，我需要它将div内容压低。

建议？

来源

2011-11-30 chrislovecnm

你检查了jquery ui - 会给你两个本地datepicker和手风琴扩展div – alonisser

感谢您的建议！我看到了完全相同的问题。我不能有一个浮动div。直接在日历下面的内容需要被推下来......该日历上的z-index也使它浮动... – chrislovecnm

与CSS一样被重新标记，这是这里的主要问题 – alonisser

更新回答

小部件漂浮，因为它有一个位置是：绝对的;和jquery函数中的高度偏移量。

参见CSS：

#widgetCalendar有一种风格，位置：绝对的。您需要将其删除，这会使其工作，但是随后会出现其他样式问题，这些问题都可以通过CSS调整来处理。

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

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

那么你就不需要高度偏移。

如果你能做一个jsfiddle，那将是非常好的，因为我无法测试，而无法看到你在做什么。

编辑 - 用户不使用jQuery UI的

这是由于jQuery用户界面的性质 - 日历是一个专门的对话。 jQuery UI对话框是一个popin。但是，您可以抵消这一点：

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

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

来源

2011-12-09 15:03:02 Jason

我不使用jqueryui ... – chrislovecnm

@chrislovecnm - 查看更新的答案 – Jason

非常感谢！将试试 – chrislovecnm

重构jquery动画

回答

相关问题