Дисплей: Нет уничтожает рендеринг других JQuery объектов

Question

Так у меня есть JQuery множественного выбора выпадающем DropDownBox'е (Флажки внутри капли вниз)
Я пытался реализовать this так, что он будет выглядеть меню, которое Выдвижной на наведите указатель мыши на предоставленный div. так вот мой код

ASP код:

<div class="box"> 
     SORT? 
     <div class="hiddencolumn" style="position: absolute; background-color:Black; height:auto;"> 
      <asp:DropDownList ID="CompanyDropDownList" Class="s10" runat="server" AppendDataBoundItems="True"> 
      </asp:DropDownList> 
      <br /> 
      <asp:DropDownList ID="RegionDropDownList" Class="s10" runat="server" AppendDataBoundItems="True"> 
      </asp:DropDownList> 
      <br /> 
      <asp:DropDownList ID="AreaDropDownList" Class="s10" runat="server" AppendDataBoundItems="True"> 
      </asp:DropDownList> 
      <br /> 
      <asp:DropDownList ID="BranchDropDownList" Class="s10" runat="server" AppendDataBoundItems="True"> 
      </asp:DropDownList> 
      <br /> 
      <asp:DropDownList ID="StorageGroupDropDownList" Class="s10" runat="server" AppendDataBoundItems="True"> 
      </asp:DropDownList> 
      <br /> 
      <asp:DropDownList ID="SORDropDownList" Class="s10" runat="server" AppendDataBoundItems="True"> 
      </asp:DropDownList> 
      <br /> 
      <asp:DropDownList ID="TicketDropDownList" Class="s10" runat="server" AppendDataBoundItems="True"> 
      </asp:DropDownList> 
      <br /> 
      <asp:DropDownList ID="KaratDropDownList" Class="s10" runat="server" AppendDataBoundItems="True"> 
      </asp:DropDownList> 
      <br /> 
      <asp:DropDownList ID="PORIGINDropDownList" Class="s10" runat="server" AppendDataBoundItems="True"> 
      </asp:DropDownList> 
      <br /> 
      <asp:DropDownList ID="StatusDropDownList" Class="s10" runat="server" AppendDataBoundItems="True"> 
      </asp:DropDownList> 
      <br /> 
      <asp:DropDownList ID="ClassificationsDropDownList" Class="s10" runat="server" AppendDataBoundItems="True"> 
      </asp:DropDownList> 
      <br /> 
      <asp:Button ID="SortButton" runat="server" Text="Sort" OnClick="SortButton_Click" /> 
     </div> 
    </div> 

JavaScript для коробки ниспадающего контрольного списка и парить FadeIn

<script language="javascript" type="text/javascript"> 
     $(document).ready(function()  
     {     

      $(".s10").dropdownchecklist({ firstItemChecksAll: true,forceMultiple: true, onComplete: function(selector) { 
       var values = ""; 
       for(i=0; i < selector.options.length; i++) { 
        if (selector.options[i].selected && (selector.options[i].value != "")) { 
         if (values != "") values += ";"; 
         values += selector.options[i].value; 
        } 
       } 
       alert(values); 
      } }); 


      $(function(){ 
    $(".box").hover(function(){ 
     $(this).find(".hiddencolumn").fadeIn(); 
    } 
        ,function(){ 
         $(this).find(".hiddencolumn").fadeOut(); 
        } 
        );   
}); 

    }); 
    </script> 

Css

.hiddencolumn 
{ 
     display: none; 
} 

когда я удалить скрытый класс колонки на (например, удалить display:none;)
Rendering правильно так:
проблема, когда я добавил hiddenColumn класса или добавлены display:none на DIV это то, что делает

Любая помощь? или работать? любой гид был бы очень оценен.

Answer 1

Основываясь на similar question, вы могли бы повторить ваш fadeOut и fadeIn с:

// FadeOut with visibility : hidden 
$(this).find(".hiddencolumn").fadeOut("slow", function() { 
    $(this).show().css({visibility: "hidden"}); 
}); 

// FadeIn with visibility : visible 
$(this).find(".hiddencolumn").hide().css({visibility: "visible"}).fadeIn("slow"); 

Проблема заключается в том, что display: none фактически не удаляет элемент из компоновки, поэтому он больше не имеет высоту или ширину, которые влияют на другие элементы, в то время как простое изменение элемента opacity, например, с .animate({opacity:1}), делает элемент 100% непрозрачным, но элемент по-прежнему реагирует на события, такие как щелчки мыши. visibility: hidden - единственное правило CSS, которое отображает контур элемента в макете, но не представляет его пользователю.

Answer 2

использование max-height:0, overflow:hidden изначально, а также набор для наведения max-height:auto.