jquery - 如何在父 ul mouseout 上隐藏子 ul

Question

我正在使用 UN order list 标签和 jquery 创建菜单

<style type="text/css">
    ul
    {
        font-family: Arial, Verdana;
        font-size: 10px;
        margin: 0;
        padding: 0;
        list-style-type: none;
    }
    ul#menu > li
    {
        display: block;
        position: relative;
        float: left;
        display: inline;
        list-style-type: none;
    }
    ul#menu li ul
    {
        display: none;
        position: absolute;
    }
    ul li a
    {
        display: block;
        text-decoration: none;
        color: #ffffff;
        border-top: 1px solid #ffffff;
        padding: 5px 15px 5px 15px;
        background: #2C5463;
        margin-left: 1px;
        white-space: nowrap;
        text-align: center;
    }

    ul li a:hover
    {
        background: #617F8A;
    }
    /* ul li:hover ul
    {
        display: block;
        position: absolute;
        text-align: center;
    }
    li:hover li
    {
        font-size: 13px;
    }*/
    li:hover a
    {
        background: #617F8A;
    }
    li:hover li a:hover
    {
        background: #2C5463;
    }
</style>

这是我使用过的jquery插件链接

http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js

这是 jquery 代码

<script type="text/javascript">
    $(document).ready(function () {
        $("#menu li").mouseover(function () {
            $(".submenu").stop().slideDown();
        });
    });

    $("#menu").mouseout(function () {
        $(".submenu").hide();
    }); 
</script>

这是 html

<div id="linkbar">
    <ul id="menu">
        <li style="margin-left: 2px;"><a href="#">Home</a></li>
        <li><a href="#">About Us</a> </li>
        <li><a href="services.html">Services</a>
            <ul class="submenu">
                <li><a href="trademarks.html" >Trademarks</a></li>
                <li><a href="Patents.html" >Patents</a></li>
                <li><a href="copyright.html">Copy Right</a></li>
                <li><a href="design registration.html" >Design Registration</a></li>
                <li><a href="iso9001.html">ISO 9001</a></li>
                <li><a href="roc.html">Company Formation</a></li>
                <li><a href="importexpertcode.html">Import Export Code</a></li>
                <li><a href="shop establishment.html">Shop Extablishment</a></li>
                <li><a href="tax Duties.html">Tax- Duties</a></li>
                <li><a href="patnershipworks.html">Partnership Works</a></li>
            </ul>
        </li>
        <li><a href="contactus.html">Contact us</a> </li>
        <li><a href="application status.html">Application Status</a></li>
    </ul>
</div>

当我将鼠标悬停在 ul 菜单上时，它会显示子菜单 但是当鼠标移出时，它不会隐藏子 ul !有什么问题请帮忙

请建议是否有任何网站可以下载简单的jquery菜单

Answer 1

问题是您没有绑定(bind) mouseout文档就绪后即可运行，因此 #menu当您绑定(bind)事件处理程序时不存在。

$(document).ready(function () {
    $("#menu li").mouseover(function () {
        $(".submenu").stop().slideDown();
    });

    $("#menu").mouseout(function () {
        $(".submenu").hide();
    }); 
});

Here is a jsFiddle showing your code working 。 Here is one with the code as you submitted it.

<小时/>

还值得注意的是另一种选择，即不使用 $(document).ready()根本不。如果您放置 <script> body 底部的元素元素，您不需要等待 ready事件。因此，以下内容也可以工作:

<!-- at the end of the body element -->
    <script>
        $("#menu li").mouseover(function () {
            $(".submenu").stop().slideDown();
        });

        $("#menu").mouseout(function () {
            $(".submenu").hide();
        }); 
    </script>
</body>