2

iPad からこの Web ページhttp://morsapera.com/rb/HTML-Files/home.htmlにアクセスし、ドロップダウンを表示するメニュー項目をクリックすると。

ユーザーがメニュー以外の場所をクリックすると、ドロップダウンが非表示になるようにします。メニューのすぐ下の画像をクリックすると、ドロップダウンが非表示になりますが、ヘッダーのどこかをクリックしてもそのまま残ります。

4

3 に答える 3

0

私は、タッチ デバイスの純粋な CSS ドロップダウン メニューで何年も苦労してきました。しかし、数日前、このすばらしい jQuery プラグインを見つけました。

古いアイデアを取り除き、このスクリプトをプロジェクトに含めて、たった1行のコードで幸運になることを本当にお勧めします:)

$('#navi li:has(ul)').doubleTapToGo();

編集 残念ながら、jsFiddle はダウンしているか、メンテナンスされています (パッチ火曜日)。jQuery プラグインを最大 4 つのレベルでテストしたところ、完璧に動作しました!!!!

これは非常に大量のコードですが、前述したように、jsFiddle は現時点では機能しません。

<head>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script src="doubletaptogo.js"></script>
    <script>
        $(document).ready(function() { console.log('ready'); $('li:has(ul)').doubleTapToGo();});
    </script>
    <style>
        * {
            margin:0px;
            padding:0px;
        }
        body * {
            display:block;
        }
        ul li {
            width:200px;
            height:100px;

            float:left;
            position:relative;

            background-color:red;
        }
        ul li ul {
            top:100px;
            left:0px;
            display:none;
            position:absolute;
        }
        ul li:hover > ul {
            display:block;
        }
        ul li ul li {
            position:relative;
            background-color:green;
        }
        ul li ul li ul {
            top:0px;
            left:200px;
            width:10000px;
        }
        ul li ul li ul li {
            float:left;
            position:relative;
            background-color:blue;
        }
        ul li ul li ul li ul {
            top:100px;
            left:0px;
            width:200px;
        }
        ul li ul li ul li ul li {
            background-color:yellow;
        }
        ul li ul li ul li:hover > ul {
            display:block;
        }
    </style>
</head>
<body>
    <ul>
        <li>
            test 1
        </li>
        <li>
            test 1
            <ul>
                <li>
                    test 2.1
                    <ul>
                        <li>
                            test 2.1
                        </li>
                        <li>
                            test 3.2
                        </li>
                    </ul>
                </li>
                <li>
                    test 2.2
                    <ul>
                        <li>
                            test 3.1
                        </li>
                        <li>
                            test 3.2
                            <ul>
                                <li>
                                    test 3.1
                                </li>
                                <li>
                                    test 3.2
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</body>
于 2013-08-05T22:37:12.947 に答える
0

これをメニューのクリックハンドラーに入れます：

event.stopPropagation();

次に、これを init 関数または私が推測する場所に入れます。

$(document).on('click', function(){
  //REMOVE CLASS THAT MAKES MENU SHOW OR WHATEVER
});
于 2013-08-05T22:39:05.247 に答える