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 with 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(); 从页面的负载.

如果我按下a#applyStyle,在扩展div#advancedSearch之前,我遇到了同样的问题.

但是,如果我扩展div#advancedSearch并按下a#applyStyle后,问题就解决了.

但是,如果我用$('form')运行页面.jqTransform(); 在负载上运行,按下a#applyStyle后我无法重新应用它.

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

但是,我不知道如何做到这一点(如果这样可行的话).

---

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

Answer 1

我遇到了一个完全不同的问题,所以我想我会把它与解决方案一起输入,以便人们可以找到它......

jqtransform将z-index值应用于所有选择下拉列表(在本例中为元素,而不是选项),并且从10开始向下执行此操作.这意味着第二个选择框的z-index为9,第3,第8,第4等等......如果你的数量超过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>

这很漂亮,因为您可以控制哪个选择框出现在其他框上方.因此,使tabindex减少页面.您不希望下拉列表显示在下方的其他选择框下方.

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