1

説明

私はこれを探し回っていましたが、この特定の問題の解決策やアドバイスを見つけることができませんでした。

ドロップダウンリストのあるアイテムを含むナビゲーションメニューがあります。これらのドロップダウンリストは、ドロップダウンのあるメニューボタンのいずれかをクリックすると有効になり、その後、ドロップダウンはホバー時に表示/非表示になります。ドロップダウンが有効になっているときに画面上の他の場所をクリックすると、すぐに無効になって消えます。

悪い説明で申し訳ありませんが、それは私がそれを置くことができる最良の方法です:-(

ここで基本的な例を作成しました（ドロップダウンは表示されず、コンソールにログインするだけです）：

http://jsfiddle.net/VFJA3/4/

すべてのHTMLとCSSを無視してください。これを作成する最も簡単な方法は、すべてのコードを積み上げることでした。この問題には関係ありません。

私の質問

ご覧のとおり、私には。というプロパティがありますMN.dropDownsOn。このプロパティは、ドロップダウンをに表示するかどうかを示すブール値mouseenterです。メニュー項目がクリックされたとき、またはクリックされた以外の何かがクリックされたときに、ブール値が有効/無効になります...

私が知りたいのは、これがより良い方法で達成できるかどうかです。ドロップダウンが有効になっているかどうかを示すためにグローバル値を保存するのは本当に好きではありませんが、それを行うためのより良い方法は考えられません。助言がありますか？

前もって感謝します

アクセスを簡単にするために、ここに私のJSがあります：

MN.dropDownsOn = false;

/**
 * Initialize the Drop Downs
 * Initialize the Drop Downs in the Navigation Menu
 */
MN.initializeDropDowns = initializeDropDowns;
function initializeDropDowns(){
    // THIS IS THE PART I AM UNSURE ABOUT
    $(document).on('click','.dropdown',function(e){
        // Enable all the drop downs
        MN.dropDownsOn = true;
        // Ensure this down is now visible
        $(this).trigger('mouseenter');
        // Stop jQuery from disabling the dropdowns
        e.stopPropagation();
    });
    $(document).click(function(){
        // Enable all the drop downs
        MN.dropDownsOn = false;
    });     
    // BELOW IS FINE, APART FROM THE MN.DROPDOWNSON MIGHT NEED TO GO
    // Set the hover functions
    $(document).on('mouseenter','.dropdown',function(){
        if(MN.dropDownsOn){
            // Show the dropdown    
        }
    });
    // Set the hover functions
    $(document).on('mouseleave','.dropdown',function(){
        if(MN.dropDownsOn){
            // Hide the dropdown    
        }
    });
}
4

1 に答える 1

1

他に提案がなかったので、私は自分のコメントを推奨事項として置きます。

  1. 関数initializeDropDownsでdropDownsOnをローカル変数にします。これは、関数に登録されているすべてのイベントハンドラーで使用できます。

  2. initializeDropDownsをクラスに変換し、イベントハンドラーとdropDownsOnをメンバー変数として追加します。構築されたオブジェクトは、データとして$（document）にバインドされ、イベント処理中に取得できます。

于 2012-12-14T19:34:52.437 に答える