javascript - 在隐藏的联系表单上使用 jqTransform，选择框值不显示

Question

抱歉，如果这很麻烦，但我真的需要一些帮助:

http://dev.rjlacount.com/treinaAronson-form/

点击左上角的“联系方式”按钮可以看到联系方式。我正在使用 jqTransform jQuery 插件来设置它的样式。它最初是隐藏的 display:none;应用于 ID 为“panel”的 div，并使用以下内容滑入:

$("#flip").click(function(e){
    e.preventDefault();
    $("#panel").slideToggle("3000");
});

使用此设置，联系表单不会在其字段内显示选择框的当前值。如果我改为删除显示:无；从我的 CSS 中获取面板 div 的规则，并在页面加载后隐藏表单:

$("#panel").hide();

表单显示正确。如果我在页面加载后用 jQuery 隐藏它，有人知道我如何使它工作并避免出现打开的面板的闪烁吗？

非常感谢您的任何建议。如果我可以提供更多信息，请告诉我。

Answer 1

问题是，jqtransform 正在设置标签的宽度(转换后的选择中的当前可见值)以匹配原始选择的宽度。

如果原始选择(或其父级)设置了 display:none，并且没有指定任何 css 宽度，则 .width() 的结果该元素上的值为零。

您实际上可以检查(使用 firebug 或 google chrome 开发工具)，并不是联系表单没有显示选择元素的当前值，而是以等于零的宽度显示它。

在您的情况下，最简单的解决方案是(在您的 css 文件中)为作为联系表单一部分的选择设置固定宽度。这样，即使它们一开始会被隐藏，jqtransform 也会为标签设置正确的宽度。例如:

/* css declaration */
#change-form select {
    width: 390px;
}

旁注:当然还有其他方法可以让它发挥作用，包括调整 jqtransform 脚本以适应您的特定用例。与设置标签宽度相关的部分脚本从第 289 行开始。