1

我正在使用联合国订单列表标签和 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菜单

4

2 回答 2

4

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

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

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

这是一个 jsFiddle 显示您的代码工作。这是您提交的代码之一。

还值得注意的是另一个替代方案，它根本不使用$(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>
于 2013-11-07T13:06:15.730 回答
0

使用.hover()

演示

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

或者

演示

$(document).ready(function () {
    $("#menu li").hover(function () {
        $(".submenu").stop().slideDown();
    }, function () {
        $(".submenu").hide();
    });
});
于 2013-11-07T13:04:25.737 回答