如何在父 ul mouseout 上隐藏子 ul

Question

我正在使用联合国订单列表标签和 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 菜单上时，它会显示子菜单 但是当它 mouseout 时它不会隐藏孩子 ul ！有什么问题请帮忙

请问有没有网站可以下载简单的jquery菜单

Answer 1

使用.hover()

DEMO

$(document).ready(function () {
    $("#menu li:has('ul')").hover(function () {
        $(".submenu").stop().slideDown();
    }, function () {
        $(".submenu").hide();
    });
});

或

DEMO

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

Answer 2

问题是您没有将mouseout 函数绑定到准备好的文档上，因此当您绑定事件处理程序时#menu 不存在。

$(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>