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()
    });
});

我正在使用的jQuery文件：

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

Answer 1

由于#dvCat1是#dvMain中唯一的元素，而#dvCat1是浮动的（style="float: left"），因此#dvMain元素的高度计算不正确（＆＃ 39; s有效0）和mouseleave事件不会被激发。

你可以：

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

2）在clear: both;

的最底部添加<div style="clear: both;"></div>样式的元素（例如#dvMain）

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

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

1 个答案: