Javascript jq变换和折叠DIV

我使用的jQuery插件名为：

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

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

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

但是，如果我用CSS样式“diplay:none；”隐藏div#advancedSearch，jqtransform插件将无法正确处理隐藏的元素。所以我的解决方案是用JavaScript隐藏div#advancedsearch。这实际上是可行的，不管它是否在文档准备好之后完成

但是……使用JavaScript解决方案，div#advancedSearch会在几毫秒内保持可见……这在视觉上很烦人

所以我想知道这个问题的解决方案是在CSS中，还是在修正jqtransform插件，甚至是在寻找一种方法来立即隐藏div#advancedSearch，让JS立即隐藏它

---

更新1 在jeerose评论之后，我决定将我的功能放在这里 （请注意，这些是ASP.Net标记，我用来获取图像路径）

$（'.toggleAdvancedSearch'）。单击（函数（）{
$（#advancedSearchWrap'）。滑动切换（250）；
$（'form.jqtransform'）.jqtransform（{imgPath:'}）；
返回false；
});

---

更新2 为了测试这个问题，我做了以下操作：

在页面中添加了另一个元素，ID为“applyStyle”，单击后我调用$（'form'）.jqTransform（）

禁用了$（'form'）.jqTransform（）的函数；从页面的加载

如果我在扩展div#advancedSearch之前按a#applyStyle，我会遇到与我相同的问题

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

但是，如果我使用$（'form'）.jqTransform（）运行页面；在加载时运行，我无法在按下a#applyStyle后重新应用它

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

然而，我不知道该怎么做（如果这行得通的话）

---

---

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

我假设用户选择高级选项并显示这些新元素时，您有一个功能。在这种情况下，您可以再次调用插件初始值设定项吗

$('#advanceSearchButton').click(function(){    
    $('#AdvanceSearch').show('slow', function(){
        $('form.jqtransform').jqTransform(); 
    });
});

这样，您就可以将#AdvanceSearch div设置为display:none并避免元素的瞬时显示

更新： 要明确的是，您是否已将其添加为回调函数？这将确保它将在效果完成后开火

$('#advancedSearchWrap').slideToggle(250, function(){
    $('form.jqtransform').jqTransform({ imgPath: 'asp path' }); 
    return false; 
}); 

---

这将进入你的点击处理程序。

也有同样的问题，但现在如果你添加代码来关闭你想要隐藏的面板到实际jquery.jqtransform.js文件的末尾，那么创建所有下拉列表等的代码将在隐藏div之前完成

使用jquery，我添加了以下内容来隐藏我的div，并调用“filterContents”

---

希望这对现在有所帮助。

与其设置

显示：无

不如设置它的

可见性：隐藏

我遇到了一个完全不同的问题，所以我想我应该将它与解决方案一起键入，以便人们能够找到它

jqtransform将z索引值应用于所有选择下拉列表（在本例中为元素，而不是选项），并从10开始向下执行此操作。这意味着第二个选择框的z索引为9、第三个8、第四个7等。。。如果你有超过11个，你会陷入消极。如果您的选择框位于更复杂的div集合中，z索引值非常重要（它们在背景中基本上不相似），那么这将导致大问题

要解决此问题，最好修改jqtransform代码，使其使用selectbox tabindex属性作为创建的新selecbox的z索引。这样，所有新的（临时的和样式化的）selectbox都将具有真正隐藏的selectbox tabindex属性的z索引值

基本上，从第256行到第261行（或其附近）的代码应该如下所示：

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

$(function() {
      $('#showAdvanced').toggle(function() {
        $('#sfBlock03').animate({
          height: 350
        });
      }, function() {
        $('#sfBlock03').animate({
          height: 0
        });
      });
    });

.jqTransformSelectWrapper ul a {
    display: block;
    padding: 0 5px;
    text-decoration: none;
    color:#333;
    background-color: #FFF;
    font-size: 12px;
    line-height:22px !important;
    height:22px !important;
}

var$wrapper=$select
.addClass（'jqTransfermHidden'）
.wrap（“”）
.parent（）
.css（{zIndex:$select.attr（'tabindex'）}）
;

要使用此选项，请在选择框上设置选项卡索引。。例如：

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

。。。

这很好，因为您可以控制哪个选择框显示在其他框的上方。因此，使选项卡索引在页面中向下减少。您不希望下拉列表显示在下面的其他选择框下方

---

关键词：jqtransform下拉列表选择框下拉框选择z索引不可见

$(document).ready(function () {
$('p.panel_class').click(function () {                     
    $('form.jqtransform').jqTransform(
        $('form#panel').slideToggle('fast'))    
    }); });

---

我希望这会有所帮助；-）

我在“选择”下拉列表上的z索引和上一个下拉列表下方相对定位的字段集上也遇到了类似的问题。任何具有负z索引的下拉列表都被其下方相对定位的字段集隐藏

为了“修复”这个问题，我刚刚将z指数从10增加到100

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

var$wrapper=$select
.addClass（'jqTransfermHidden'）
.wrap（“”）
.parent（）
.css（{zIndex:100 index}）

我不确定是否已经提到了此修复，但是当遇到类似的初始问题时（我有很多问题，不仅仅是

jqtransform

），而不是使用

显示：无
$(function() {
      $('#showAdvanced').toggle(function() {
        $('#sfBlock03').animate({
          height: 350
        });
      }, function() {
        $('#sfBlock03').animate({
          height: 0
        });
      });
    });

$(".open_my_popup").click(function(){
    $(".popup").fadeIn(200); //the popup part

//the recalculation part for jqtransform
    $(".jqTransformSelectWrapper").each(function(){ //remember to relaculate for each select! not for all at once, cause this will return problems
        var items = $(this).find("li").length
        var height = $(this).find("ul li > a").height(); //corresponds with css .jqTransformSelectWrapper ul a height
        var list = $(this).find("ul");
        list.css("height",(items*height)+"px");
    });
});

.jqTransformSelectWrapper ul a {
    display: block;
    padding: 0 5px;
    text-decoration: none;
    color:#333;
    background-color: #FFF;
    font-size: 12px;
    line-height:22px !important;
    height:22px !important;
}