Question

所以我有一个jquery Multiple Select 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 For box下拉列表和悬停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;
}

当我删除Div上的Hidden列类时（例如，移除display:none;）
渲染是这样的正确：
问题是我在div上添加了hiddenColumn类或添加了display:none这就是渲染

有任何帮助吗？或解决？任何指南都将非常感激。

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实际上从布局中删除了元素，因此它不再具有影响其他元素的高度或宽度，而只是更改元素＆＃39; s opacity，例如.animate({opacity:1})使元素100％不透明，但元素仍然响应事件，例如鼠标点击。 visibility: hidden是唯一的CSS规则，它在布局中呈现元素的轮廓，但不以其他方式呈现给用户。

Answer 2

最初使用max-height:0, overflow:hidden，并在悬停集max-height:auto上使用。

显示：无破坏其他jquery对象的渲染

2 个答案: