0

非表示の div があり、リンクをクリックすると div が表示されます。

  <div id="baystar">
        <!-- My hidden stuff -->
  </div>

  <div class="galactica">
    <li class="menu-563"><a class="menu-563 active" href="#">Tools</a></li>
  </div>

Tools リンクをクリックすると、div.baystar が表示されます。div.baystarを開いた状態で中をクリックしても閉じない。div.baystar 以外の場所をクリックすると、div.baystar が閉じます。すべてがうまくいっています。問題は、[ツール] リンクをクリックして div.baystar を閉じると、すぐに閉じてから再度開くため、2 回起動することです。 

  $(".menu-563").click(function(){
    $("#baystar").slideToggle("fast");
    $(this).toggleClass("active"); return false;
  });

 $('a.menu-563').attr('href', '#'); {
 }

 var mouse_is_inside = false;

$(document).ready(function()
{
    $('#baystar').hover(function(){ 
        mouse_is_inside=true; 
    }, function(){ 
        mouse_is_inside=false; 
    });

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

マウスホバー機能を外すとうまくいきます。なんらかの遅延が必要ですか、それともコードを書き直す必要があるだけですか?

4

1 に答える 1

0

これは、クリック イベントのバブリングを停止するだけであるために発生します。

mouseupも届かないように止める必要があります。body

  $(".menu-563").click(function(){
    $("#baystar").slideToggle("fast");
    $(this).toggleClass("active"); return false;
  }).mouseup(function(e){return false;});

全体を処理する代わりにこれを行うことができます..

$(".menu-563").click(function(e) {
    $("#baystar").slideToggle("fast");
    $(this).toggleClass("active");
    return false;
});

$('body').click(function(e){
    if (!$(e.target).closest('#baystar').length){
       $("#baystar").hide();
    }
});
于 2013-01-01T21:52:29.333 に答える