0 
$('.searchbox').blur(function() {
   $("#gohan").hide();
});
$('.dropdown').blur(function() {
   $("#gohan").hide();
});

こんにちは、私は検索ボックスを持っています。文字を入力すると、多数のli「検索結果」を含むulで構成されるドロップダウン（id = gohan）が表示されます。ドロップダウンまたは検索ボックスにフォーカスがなくなるたびに、つまり検索ボックス/ ul / liにないものをクリックすると、ドロップダウンが消えるようにします。これらの2つのイベントハンドラーは別々に正常に機能しますが、それらを一緒に機能させる方法がわかりません。私はそれらを次のようにつなぎ合わせようとしました

$('.dropdown, .searchbox').blur(function() {

しかし、それは壊滅的な失敗をもたらしました。これを修正するための条件/セレクターに関するアイデアはありますか？また、ドロップダウンと検索ボックスの両方を1つのdivにカプセル化して、それらを含み、大きなコンテナーを選択しようとしましたが、それも機能しませんでした。検索ボックスの焦点が合っていない場合は、ドロップダウンの焦点が合っていないかどうかを確認するために別のチェックを行う必要があります。その場合にのみ、両方に焦点が合っていない場合は、非表示にします。それは正しい論理ですか？

4

1 に答える 1

2

#gohandocument.body のクリックとフォーカスを確認してから、発生したイベントのターゲットを調べた場合は、非表示にする方が簡単です。基本的に、ユーザーが「ウィジェット」または「ウィジェット要素」のセット内にないものをクリックまたはフォーカスした場合、コントロールを非表示にして、ユーザーが行っていることを続行できるようにします。

var handler = function(e){
    var isMyWidget = $(e.target).hasClass('searchbox') || $(e.target).hasClass('dropdown');
    if(!isMyWidget ){
        $('#gohan').hide();
    }
}


$(document.body).click(handler).focus(handler);

DOM と監視している要素によっては、検索ボックス/ドロップダウンの祖先を確認し、ターゲット要素に特定の祖先があるかどうかを確認することもできます。

例：

var isMyWidget = $(e.target).closest('.widgetContainer').length > 0;

これにより、ウィジェットが他のコントロールを含むように進化した場合、それらの新しいコントロールを使用してもウィジェットが非表示になりません (それらが同じ祖先、つまり親 div 内にある限り)。

于 2012-07-02T16:48:36.023 に答える