javascript - jqtransform 和折叠的 DIV

Question

我正在使用名为:jqtransform 的 jQuery 插件

此插件使用 JavaScript 将 CSS 样式应用于表单元素。

我遇到的问题存在于以下场景中:

我正在构建一个带有高级搜索选项的搜索页面。当页面加载时，名为“advancedSearch”的 div 被隐藏，只有当用户点击一个元素时它才会显示。在 div#advancedSearch 中，我有几个表单元素。

但是，如果我使用 CSS 样式隐藏 div#advancedSearch:“diplay:none;”，jqtransform 插件无法正确处理隐藏的元素。所以我的解决方案是用 JavaScript 隐藏 div#advancedsearch。这确实有效，并且在文档准备好之后是否完成并不重要。

但是......对于 JavaScript 解决方案，div#advancedSearch 会保持可见几毫秒......这在视觉上很烦人。

所以我想知道这个问题的解决方案是在 CSS 中，还是在更正 jqtransform 插件中，或者甚至是在找到一种方法来立即隐藏 div#advancedSearch 与 JS 使其立即隐藏。

---

更新 1

在 jeerose 评论之后我决定把我的函数放在这里(请注意 <%= %> 是 ASP.Net 标签，我用它来获取图像路径)

$('.toggleAdvancedSearch').click(function() {
    $('#advancedSearchWrap').slideToggle(250);
    $('form.jqtransform').jqTransform({ imgPath: '<%= ResolveClientUrl("~/masterpages/img/jqtransform/") %>' });
    return false;
});

---

更新 2

为了测试这个问题，我做了以下事情:

向页面添加了另一个元素，ID 为“applyStyle”，onClick 我调用了 $('form').jqTransform();

禁用 $('form').jqTransform();来自页面的加载。

如果我在展开 div#advancedSearch 之前按 a#applyStyle，我会遇到同样的问题。

但是如果我展开 div#advancedSearch 然后按下 a#applyStyle，问题就解决了。

但是，如果我使用 $('form').jqTransform(); 运行页面加载函数，我无法在按下 a#applyStyle 后重新应用它。

我认为解决方案可能是: 禁用 div#advancedSearch 中的所有元素，并在扩展 div 的同一函数上，使它也将样式应用于元素位于 div#advancedSearch 内。

但是，我不知道该怎么做(不知道这是否可行)。

---

PS:这似乎是插件的一个已知问题，但我不能无限期地等待解决方案。

Answer 1

我遇到了一个完全不同的问题，所以我想我会把它和解决方案一起输入，这样人们就有希望找到它......

jqtransform 将 z-index 值应用于所有选择下拉列表(在本例中为元素，而不是选项)，并且它从 10 开始向下执行。这意味着第二个选择框的 z-index 为 9，第三个为 8，第四个为 7 等等……如果超过 11 个，就会出现负数。如果您的选择框位于更复杂的 div 集中，其中 z-index 值很重要(它们基本上消失在背景中)，这会导致大问题。

要解决此问题，修改 jqtransform 代码可能是个好主意，因此它使用 selectbox tabindex 属性作为它创建的新选择框的 z-index。这样，所有新的(临时设计的和样式化的)选择框都将具有真正隐藏的选择框 tabindex 属性的 z-index 值。

基本上，第 256 行到第 261 行(或附近)的代码应该如下所示:

var $wrapper = $select
                .addClass('jqTransformHidden')
                .wrap('<div class="jqTransformSelectWrapper"></div>')
                .parent()
                .css({zIndex: $select.attr('tabindex')})
            ;

要使用它，请在选择框上设置标签索引 .. 例如:

<select name="blah" id="blah" tabindex="33">...</select>

这很不错，因为您可以控制哪个选择框显示在其他选择框之上。因此，使 tabindexes 减少页面。您不希望下拉菜单出现在下方的其他选择框下方。

关键字:jqtransform dropdowns selectbox 下拉框选择z-index不可见