Javascript 显示：无将破坏其他jquery对象的呈现

因此，我有一个jquery Multiple Select下拉框（下拉框中的复选框）
我试图实现它，使它看起来像一个菜单，悬停在提供的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>

当我删除Div上的隐藏列类时（例如删除

显示：none；

）
渲染是正确的，如下所示：
问题是当我在div上添加了

hiddenColumn

类或添加了

display:none

时，这就是渲染的内容

---

有什么帮助吗？还是四处工作？非常感谢您的指导。

首先使用

最大高度：0，溢出：隐藏

，然后悬停设置

最大高度：自动

基于a，您可以通过以下方式重播您的

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%不透明，但元素仍会响应事件，例如鼠标点击<代码>可见性：隐藏是唯一一条CSS规则，它在版面中呈现元素的轮廓，但不会以其他方式向用户显示。使用

可见性：隐藏

而不是

显示：无

可以保留版面中元素的专用空间。@Anthony如果我使用

可见性：隐藏

jquery因为

fadein（）

不起作用，所以在这种情况下，即使我将鼠标悬停在div上，它也不会像我所希望的那样出现，如果你能给出另一个jquery，请将它作为一个答案发布谢谢：）这个答案非常适合我刚才使用的

$（This）。find（.hiddencolumn”）.hide（）.css（{visibility:}.fadein（“slow”）函数（）{$（this）.find（“.overlay”）.fadeOut（）；}）
.hiddencolumn
{
      display: none;
}

// 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");