0

对于我个人的使用，我用 HTML、CSS 和 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>
4

1 回答 1

1

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

false;

...成为

return false;

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

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

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

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

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

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

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

于 2013-03-26T11:04:37.180 回答