javascript – 重构jquery动画

2023年2月22日 209次阅读

我正在使用
here的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

这是由于jquery UI的本质 – 日历是一个专门的对话框. jQuery UI对话框是一个popin.但是,你可以抵消这个：

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

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

点赞