在隐藏的联系人表单上使用 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 正在设置标签的宽度（转换后的选择中当前可见的值）以匹配原始选择的宽度。

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

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

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

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

旁注：当然还有其他方法可以使其工作，包括调整 jqtransform 脚本以适合您的特定用例。与设置提到的标签宽度相关的脚本部分从第 289 行开始。