2011-10-28 19 views
0

CSSを作成しようとしています& JSベースのドロップダウンメニュー。CSSとJSドロップダウンメニューのjQuery .blurと.focusの問題

この例では、すべてのブラウザで動作します。

http://jsfiddle.net/bqQqN/1/

しかし、私は、アイテムが集中し、自動的に<body>で何か他のものをクリックした後に閉じ失う確認します。さて、.blur機能は、すべてのブラウザで作業を行いますが、私は上の二回クリックしたときにはもう挿入し、他のテキストはありません

http://jsfiddle.net/bqQqN/2/

:私は、次のコードでそれを達成しようとしています要素を閉じると、閉じてすぐに開くのではなく、再び開きます。

私はここで迷っています。もちろん、.blur関数を保持したいのですが、正常な動作を維持できるようにしたいのです。

ご協力いただきありがとうございます。

答えて

1

もう一度隠すには、クリックリスナーをドキュメントにバインドして、クリックしたものがドロップダウンリストにあるかどうかを確認し、そうでない場合はfalseを返します。効果的には、ドロップダウン内のリンク以外をクリックすると、そのリンクが非表示になります。

var $dropdown = $(".dropdown > dd > ul"), 
    $drop_link = $(".dropdown > dt > a"); 

$drop_link.click(function(e) { 
    $dropdown.toggle(); 
    e.preventDefault(); 
}); 

// Bind the click to everything 
$(document).mouseup(function(e) { 
    // If the dropdown is visible 
    // and the thing we've clicked is not a descendent of the dropdown 
    if ($dropdown.is(":visible") && $(e.target).parents('.dropdown').length == 0) { 
     $dropdown.hide(); 
    } 
}); 

他のメニューが非表示になります開いたように、私もあなたのjsFiddle

+0

ありがとうございます、それはほぼ解決されました。私は今、次の問題があります。このjsFiddleをチェックしてください:http://jsfiddle.net/NcNHf/2/。メニューをクリックすると、他のメニューが自動的に閉じられます。どうすればそれを達成できますか? –

0

を更新した私はさらに...私もそうサイドバイサイドするトップメニュー項目を移動し、あなたのjsFiddleを更新しました開いているメニューが閉じていることがより明白であることを示しています。

関連する問題