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'。クリックがないと伝播し、2番目の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 に答える