1

mouseenterイベントとmouseleaveイベントを設定した比較的シンプルなドロップダウンメニューがあります。メニューはうまく機能しますが、モバイルSafariでは、メニューを「2回目」（メニューを開いた後）にトリガーするリンクをクリックしてもメニューは閉じません。クリックイベントをHTMLまたは本文に追加して、メニューのクローズをトリガーしようとしましたが、これは機能していないようです。

私のHTML：

<ul>
<li class="dropdown"><a href="#">Toggle dropdown</a>
    <ul class="dropdown-menu">
        <li>This is my sub menu</li>
        <li>And another item</li>
        <li>And one more</li>
    </ul>
</li>
<li><a href="#">Just another link</a></li>

私のCSS（このビットは本当に複雑です）：

ul.dropdown-menu { display: none; }

私のjQuery：

$(document).on({ mouseenter: function(){
        $(this).find('.dropdown-menu').stop(true, true).delay(250).fadeIn(100);
        $(this).addClass('open');
    }, mouseleave: function() {
        $(this).find('.dropdown-menu').stop(true, true).delay(50).fadeOut(50);
        $(this).removeClass('open');
    }}, 'ul li.dropdown');

私もこれをすべてフィドルに投げました：

http://jsfiddle.net/EtS8E/1/

li自体にクリックイベントを追加すると、クローズをトリガーできると思いましたが、残念ながら、それでも目的の結果は得られません。

私はこれを何時間もグーグルしていて、ここにいくつかの関連する質問と答えを見つけました（たとえば、ドロップダウンを閉じるために「body」jqueryイベントを適切に処理する方法）が、どちらも説明どおりに機能していないようです

何か案は？：！

4

1 に答える 1

0

これは誰の役にも立たないかもしれませんが、わかりやすくするためにここに投稿します。最後に、以下を使用して問題を修正しました。

$(document).on({ mouseenter: function(e){
        if (!iOSdevice) {
            $(this).find('.dropdown-menu').stop(true, true).delay(250).fadeIn(100);
            $(this).addClass('open');
        }
    }, mouseleave: function(e) {
        if (!iOSdevice) {
            $(this).find('.dropdown-menu').stop(true, true).delay(50).fadeOut(50);
            $(this).removeClass('open');
        }
    }, click: function(e) {
        e.preventDefault(); // Prevents the default click event
        if ($(this).hasClass('open')) {
            $(this).find('.dropdown-menu').stop(true, true).delay(50).fadeOut(50);
            $(this).removeClass('open');
        } else {
            // Reset all other open dropdowns
            resetDropDowns();
            // Open this dropdown
            $(this).addClass('open');
            $(this).find('.dropdown-menu').stop(true, true).delay(250).fadeIn(100);
        }
    }}, 'header nav ul li.dropdown:not(.disabled)');

iOSdevice 変数は、ブラウザーの種類に応じて true/false になります。

于 2013-03-12T12:23:44.090 に答える