覆盖在第一页加载时奇怪可见的 jQuery UI Datepicker div。

Posted 2023-05-07

【中文标题】覆盖在第一页加载时奇怪可见的 jQuery UI Datepicker div。

【英文标题】：Override jQuery UI Datepicker div visible strangely on first page load.

【发布时间】：2011-06-02 14:48:36

【问题描述】：

这里发生了一些奇怪的事情：

Datepicker 的一个实例在 this 页面左上角的一个奇怪的地方显示为一个单条。

我在页面上同时使用 jQuery UI 的 Datepicker 和 Accordion。在 UI 的 CSS 中，Datepicker 的 display:none 似乎被 Accordion 的 display:block 覆盖，至少根据 Firebug（见下面的图片）。

然后，一旦在“餐饮/活动室”选项卡中单击 Datepicker 触发器（单击其中一个按钮以显示带有 Datepicker 的 div），display:none 似乎就可以工作了。

下面是坏 div 的样子：

这是 Firebug 面板：

【问题讨论】：

同样的问题；见i.imgur.com/vNukO.gif 和i.imgur.com/SciCa.gif。你让它工作了吗？

【参考方案1】：

我遇到了同样的问题，虽然上述一些解决方案有效，但最简单的解决方法是将其添加到您的 css 中：

#ui-datepicker-div display: none;

当它无法绑定到现有的不可见元素时，这基本上隐藏了重新对齐的 datepicker 元素。您将其隐藏，但当您单击需要显示日期选择器的元素时，它将再次初始化。重新初始化后，id 为 #ui-datepicker-div 的日期选择器元素将具有正确的位置。

【讨论】：

真正最简单的修复方法，似乎只发生在我身边的 Chrome 中。

非常感谢您的修复。节省了很多时间。

超级修复，非常感谢。 :) :) :)

【参考方案2】：

问题可能是您将日期选择器绑定到不可见的东西，这将解释奇怪的定位（尝试从不存在的东西偏移将退化为从 (0,0) 偏移）。 datepicker <div> 应该至少有一个表，所以 datepicker 在完成初始化之前可能会感到困惑并抛出异常。当您单击其中一个绑定输入时，它可能会再次初始化（或至少正确完成初始化），之后一切正常。

当日期输入变得可见时尝试绑定日期选择器：

删除$(".date_picker").datepicker( disabled: false ); 将id="cater" 添加到<input type="text" name="cater"/> 按下“预订活动室”按钮时，请致电$('#cater').datepicker();。

如果可行，那么您必须为其他日期选择器添加类似的技巧。如果它不起作用，那么我可能是错的。如果我的猜测是正确的，那么您可能想向 jQuery-UI 人员报告一个错误。

顺便说一句，在 Safari 中我只能看到前两个标签，我不得不切换到 Firefox 才能看到“餐饮”标签。奇怪的是，它在 Chrome 中运行良好。这可能无关紧要，但我想我还是会让你知道的。

【讨论】：

首先，请参阅下面对 chprpipr 的评论。是的，至于 Safari 问题；不仅只有两个菜单选项卡显示，而且它似乎忽略了 AnySlider（我正在使用的“页面”系统），只是将<li> 列为列表项。有什么建议吗？

Safari 问题很奇怪。第二个选项卡（早午餐菜单）上奇怪的布局表明您已经关闭了两次 <div> 并且嵌套变得混乱，不同的浏览器在尝试修复时会做出不同的猜测。我会尝试将内容从面板中拉出，这将为您提供选项卡/面板结构；然后开始将面板内容放回原处，直到它中断。这至少可以说明混乱在哪里。

实际上，我错过了<div> 标签。现在像魅力一样工作。谢谢关心...

【参考方案3】：

问题在于日期选择器绑定到的元素尚不可用。

我找到的解决方案是在单击实际元素时初始化日期选择器，然后在初始化后直接显示它。这可确保在日期选择器绑定并初始化之前该元素可用。

$(function() 
  $(".date_input").click(function() 
    $(this).datepicker();
    $(this).datepicker("show");
  );
);

....

<input type="text" class='date_input' />

【讨论】：

不知道你为什么决定把它放在一个函数中，但很公平！ :)

【参考方案4】：

就我而言，我使用了 JQuery 的会话“$(document).ready(function()”。

由于我在系统的所有页面中都加载了一个 javascript 文件，因此我只是在其上添加了以下行。

$('#ui-datepicker-div').css('display', 'none');

对我来说，这似乎是一个清晰而优雅的解决方案，因为我不必更改它的库。

最重要的是，它在所有浏览器上都运行良好。 :)

【参考方案5】：

我在 Chrome 中遇到了类似的问题，我通过编辑 jquery-ui1.7.2.custom.css 解决了它

来自：

.ui-helper-hidden-accessible position: absolute; left: -99999999px;

到：

.ui-helper-hidden-accessible  position: absolute; left: -9999999px; 

Chrome 的 9 可能太多了。

【参考方案6】：

尝试将最后一个块移动到页面底部（就在您关闭 body 标记之前）。你可以在这里阅读更多关于你为什么要这样做的信息：

http://webdevel.blogspot.com/2008/09/place-javascript-code-at-bottom-of-page.html

顺便说一句：菜单的好主意。我喜欢。

【讨论】：

好吧，我做了我一开始应该做的事：重新创建自定义 UI 并重新开始。问题是，它立即起作用，而我做了一些事情确实打破了它。更换它并不是什么大不了的事。不过，感谢您的回复。

【参考方案7】：

有时它与页面上另一个项目的 z-index 较高有关。将 z-index 设置为一个非常高的数字解决了我的问题。

#ui-datepicker-div z-index:11111;