JQuery非表示の要素がありません

Question

<ul>私はそれの下に<li>をたくさん持っています。これらの各<li>の中に隠された<div class=dbox">があります。 <li>年代とそのコンテンツの構造/階層は、次のとおり

- >リチウム
---->可視コンテンツ（H3、IMG、P、等）
---->隠されたDIV （常に表示）<li>の画像をクリックすると.dbox
-------> div.photos
-------> div.specs

、<div class="dbox">は、次に=表示が与えられますブロック。ここまでは順調ですね。私はその後、外をクリックするたびに.dboxを閉じるようにWebを検索しました。私はこれを仕事にしました：

var mouse_is_inside = false; 

    $('.dbox').hover(function(){ 
     mouse_is_inside=true; 
    }, function(){ 
     mouse_is_inside=false; 
    }); 

    $("body").mouseup(function(){ 
     if(! mouse_is_inside) $('.dbox').hide(); 
    }); 

.dboxの外側をクリックすると、閉じることができます。ここまでは順調ですね。

$('span.close').click(function() { 

     $(this).parent().parent().hide(); 

    }); 

動作しませんでした。次のステップは、「<div class="specs">内、あまりハイテクサヴィユーザーのために、このウィンドウのボタンを閉じ、そう、私は1つの最後の要素を追加して追加することでした、<span class="close">はそれにこのjqueryのコードを与えました。私は両親（ 'dbox'）と一緒にテストしたが、どちらもうまくいかなかった。面白いことに、hideを動作させない.dboxをターゲットにしたときだけです。私のような何かを行う場合は、次の、<div class="specs">を含むdiv要素を閉じます

$(this).parent().hide(); 

を、それが動作し、効果的に、私はそれから「をクリック外」コードとの競合のいくつかの並べ替えがあったと思っ<div class="specs">

閉じそう私はそれを削除し、バグは残っています...これは、このジレンマについてあなたに知識のある人に尋ねるためにここに私を導きます。事前に

おかげ G.Campos

Answer 1

を試してみてください、私はそれが動作するようになった：$(this).parents('.dbox').hide(1); それは非表示（）が何も起こらないということは空の場合のみです。 1を加えるか、何の番号をつけてもそのトリックを行います。しかし、なぜそれは0になりませんか？

Answer 2

一つの解決策は、あなたがonMouseLeaveイベントハンドラでmouse_is_inside=false;を設定することができます。

別の解決策は、このようなあなたのイベントハンドラを配線することです：

$('.dbox').click(function(e) { 
    // do stuff 
    // ... 

    // this will prevent the event from bubbling upto body's eventhandler 
    e.stopPropagation(); 
}); 

$('body').click(function(e) { 
    $('.dbox').hide(); 
}); 

また、これは親DBOXのdiv要素を閉じる必要があります：

$('.dbox span.close').click(function() { 
    $(this).parents('.dbox').hide(); 
}); 

Answer 3

あなたはmouse_insideで代わりにあなたのトリックのblurを使用することができます。

また、parent().parent()の代わりにparentsをセレクタの内側に使用することができます。

マックス

Answer 4

$(this).parent().parent().parent().hide(); // for button