Question

对于我个人用途，我开发了一个带有HTML，CSS＆amp;的小型下拉菜单。 jQuery的。当我运行脚本时，菜单进入和退出。有一些小错误，我无法弄清楚。这是我的代码。任何人都可以看看，并告诉我如何解决它。

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
<style type="text/css">
    a#plinkp
    {
        background: #CCC;
        padding: 10px;
        cursor: pointer;
        margin-left: 600px;
        margin-top: 200px;
        position: absolute;
    }

    a#testll
    {
        background: #CCC;
        padding: 10px;
        cursor: pointer;
        margin-left: 600px;
        margin-top: 250px;
        position: absolute;
    }

    div#HoverSubmenu
    {
        background: #fff;
        position: absolute;
        top: -12px;
        left: -20px;
        z-index: 100;
        width: 165px;
        display: none;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
        border:5px solid;
        border-color:#F1F2F2;
        z-index:9999;
    }

    div#HoverSubmenu li a
    {
        color: #555555;
        display: block;
        font-family: arial;
        font-weight: bold;
        padding: 6px 15px;
        cursor: pointer;
        text-decoration: none;
    }

    div#HoverSubmenu li a:hover
    {
        background: #39B54A;
        color: #FFFFFF;
        text-decoration: none;
    }

    .HoverRoot
    {
        list-style: none;
        margin: 0px;
        padding: 0px;
        padding: 11px 0 0 0px;
        border-top: 1px solid #dedede;
    }
</style>
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('[id*=link]').click(function () {
                //$("#link").click(function () {
                $('#HoverSubmenu').insertAfter($('[id*=link]'));
                $('#HoverSubmenu').css({ left: $(this).offset().left + 'px',
                    top: ($(this).offset().top + $(this).outerHeight()) + 'px',
                    position: "absolute"
                });
                toggleVisibility();
                false;
            });


            $("html").click(
            function (e) {
                if ($(e.target).not("[id*='link']")
                && e.target.id != "HoverSubmenu"
                && e.target.className != "HoverRoot"
                && e.target.className != "HoverLI" 
                && e.target.className != "atag") {
                    //alert(e.target.id);
                        $('div#HoverSubmenu').fadeOut();
                }
            });

            function toggleVisibility() {
                var submenu = $('div#HoverSubmenu');
                if (submenu.is(":visible")) {
                    submenu.fadeOut();
                } else {
                    submenu.fadeIn();
                }
            }
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <a id="plinkp">About</a>
    <a id="testll">My Test</a>
    <%--Hover UPS Menu start--%>
    <div id="HoverSubmenu">
        <ul  class="HoverRoot">
            <li class="HoverLI"><a class="atag" href="http://www.bba-reman.com">Ship with UPS</a></li>
            <li class="HoverLI"><a class="atag" href="http://www.bba-reman.com">Ship with FedEx</a></li>
        </ul>
    </div>
    <%--Hover UPS Menu end--%>
    </form>
</body>
</html>

Answer 1

尝试在'[id*=link]'点击处理程序的末尾更改此行：

false;

......待

return false;

演示：http://jsfiddle.net/nnnnnn/tdq3d/

也许你拥有它的方式只是一个错误，你遗漏了return部分？无论如何， with return false;它阻止点击事件向上传播通过DOM，这意味着它无法到达您绑定到'html'的点击处理程序。没有 return false;点击确实传播，然后第二个点击处理程序隐藏了弹出菜单。

同样在'html'点击处理程序中，if测试没有按照您的想法进行。第一部分：

        if ($(e.target).not("[id*='link']")
            && // etc

...将始终是真实的，因为.not() method不返回布尔值，它返回一个jQuery对象（并且任何对象都是真实的）。您可以通过测试该对象的.not()属性（零长度将是假的）来测试length是否返回了一个空的jQuery对象：

        if ($(e.target).not("[id*='link']").length
            && // etc

我认为这也可以解决您的问题，如下所示：http://jsfiddle.net/nnnnnn/RAGNJ/3/

由jquery创建的下拉菜单的奇怪行为

1 个答案: