Jquery 函数在我的主页上不起作用，但在其他页面上工作

Question

我试图在jQuery鼠标离开函数上隐藏dvSubCat，但它不起作用，并且在另一个页面上运行良好 完全相同的代码。

这是我的aspx代码：

<div id="dvMain" style="width: 100%;">
    <div id="dvCat1" style="float: left">
        <asp:DataList ID="dlCategories" Style="background-color: rgba(154, 153, 153, 0.99)"
            ForeColor="White" runat="server">
            <ItemTemplate>
                <div class="text-center">
                    <asp:LinkButton ID="btnCategory" CssClass="hoverStyleForCategories" ForeColor="White" Font-Underline="false"
                        Text='<%# Eval("CategoryName") %>'
                        OnClick="btnCategory_Click" runat="server" CommandArgument='<%# Eval("CategoryId") %>' />
                </div>
            </ItemTemplate>
        </asp:DataList>
    </div>
    <div id="dvSubCat" style="width: 20%; float: left">
        <asp:DataList ID="dlSubCategory" Style="background-color: orange"
            ForeColor="White" runat="server">
            <ItemTemplate>
                <asp:LinkButton ID="btnSubCat" OnClick="btnSubCat_Click" ForeColor="White" Font-Underline="false"
                    Text='<%# Eval("SubCategoryName") %>' CommandArgument='<%# Eval("SubCategoryId") %>' runat="server" />
            </ItemTemplate>
        </asp:DataList>
    </div>
</div>

这是我的jQuery：

$(document).ready(function () {
    $("#dvMain").mouseleave(function () {
        $("#dvSubCat").fadeOut()
    });
});

我正在使用的j查询文件：

<script src="Scripts/jquery-3.1.1.js"></script>

Answer 1

由于#dvCat1是#dvMain中唯一的元素，并且#dvCat1是浮动的(style="float: left"(，因此#dvMain元素高度未正确计算(实际上为0(，并且mouseleave事件不会触发。

您可以：

1( 将overflow: hidden;添加到#dvMain

2( 添加具有clear: both;样式的元素(例如 <div style="clear: both;"></div> ( 在#dvMain的最底部

还有其他技巧可以解决此问题。如果您需要更多信息，请搜索clearfix。