0

私はこのhtmlを持っています:

<div class="trigger">
    My button
</div>

<div class="panel">
    <span class="close-btn"></span>
        My panel
</div>

そしてこのjQuery：

$(".trigger").click(function() {
$('.panel').fadeIn("fast");
$(this).toggleClass('isOpen');
});


$(".close-btn").click(function() {
$('.panel').fadeToggle("fast");
$('.trigger').removeClass('isOpen');
});

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

$("body").mouseup(function() {
if (!mouse_is_inside) $('.panel').fadeOut("fast");
$('.trigger').removeClass('isOpen');
});

if ($(".trigger").hasClass('isOpen')) {
$('.panel').fadeOut("fast");
}​

私がやりたいことは次のとおりです。

  1. パネルを開けて、
  2. ページ内の任意の場所をクリックして閉じますが、パネル自体は、
  3. パネル内の閉じるボタンと、
  4. それを開いたdivで。

しかし、パネルが開いているときにdivの「トリガー」が混乱し、ページのどこでもクリックできる機能のためにパネルを開閉し続けるため、機能させることができません。

手伝ってくれてありがとう

4

2 に答える 2

0

これは美しくない解決策かもしれません：

$(".trigger").click(function() {
    $('.panel').fadeIn("fast");
});

$(".close-btn, .panel").click(function(e) {
    e.preventDefault();
    $('.panel').fadeOut("fast");
});

$(document).on('click', function(e) {
    if (!(e.target.className == 'trigger' || e.target.className == 'panel' || e.target.className == 'close-btn')) {
        $('.panel').fadeOut("fast");
    }
});

フィドル：フィドル

于 2012-06-13T12:29:00.873 に答える
0

これは、 http ://www.360kayak.orgでこれを実装した方法です: http://pastebin.com/UVvELYES

インスピレーションになれば幸いです。

解決策は、私のアニメーションがフェードではなくスライドアップ/スライドダウンである前にevent.stopPropagation();呼び出すこと ですが、フェードでも機能するはずです。stop()animate()

この部分は、「外側をクリックして閉じる」を管理します。

$('html').click( function(event) {
        var formWrapper = $("#block-user-login-form-wrapper");
        if (formWrapper != null && formWrapper.position() != null && formWrapper.position().top == 0) {
          $("#block-user-login-form-wrapper").stop().animate({
            top: "-128px"
          }, null, null, function() {
            $("#signin-button").addClass("enabled");
          });
          event.stopPropagation();
        }
      });

これにより、クリックしたときにフォームがスライドアップするのを防ぎます

  $("#block-user-login-form").click( function(event) {
    event.stopPropagation();
  });
于 2012-06-13T12:52:12.313 に答える