2

以下の解決策

この概念に関するほとんどの質問を読んだことがありますが、if ステートメントで動作させることができないようです。何か助けはありますか？

JSFiddle

$("button").click(function () {
  $("div").fadeToggle("fast");
});

if ($("div").is(":visible")) {
  $(document).click(function () {
    $("div").fadeToggle("fast");
  });

  $("div").click(function (e) {
    e.stopPropagation();
  });
}

したがって、ボタンはdivを切り替える必要があります。div が切り替えられた場合 (つまり:visible)、div 自体をクリックしたときではなく、ページ上の任意の場所をクリックすることによってのみ div を元に戻す (非表示にする) 必要があります。

解決

Diabolic の回答とKevin Bowersox の回答をこれにまとめました。

$("button").click(function (e) {
    $("div").fadeToggle("fast");
    e.stopImmediatePropagation();
});

$(document).click(function (e) {
    if($("div").is(":visible") && !$("div").is(e.target)) {
        $("div").fadeOut("fast");
    }
});
4

5 に答える 5

2

Javascript

$("button").click(function (e) {
  $("div").fadeToggle("fast");
});

$(document).mouseup(function(event){
    var target = $("#no-mod");
    if(!target.is(event.target) && !$("button").is(event.target) && target.is(":visible")){
       $("div").fadeToggle("fast");
    }else{
      return false;
    }
});

HTML

<button>Click me</button>
<div id="no-mod"></div>

例: http://jsfiddle.net/2udYp/9/

于 2013-01-31T10:17:56.177 に答える
2

あなたのコードのこの更新を親切にチェックしてください：

$("button").click(function (e) {
  $("div").fadeToggle("fast");
  e.stopPropagation();
});
$("div").click(function (e) {    
  $("div").fadeIn("fast");
     e.stopPropagation();
});
 $(document).click(function (e) {
    $("div").fadeToggle("fast");
      e.stopPropagation();
 });
于 2013-01-31T09:52:23.560 に答える
1

コードは次のようになります。

$("button").click(function (e) {
    $("div").fadeToggle("fast");
    e.stopImmediatePropagation();
});

$(document).click(function () {
    if($("div").is(":visible")) {
        $("div").fadeToggle("fast");
    }
});

$("div").click(function (e) {
    e.stopImmediatePropagation();
});

なんで？

ランタイムでイベントをバインドしていないためです。即座に発生しないステートメント内でそれを行っています。それが発生すると、すぐに実行するのではなく、イベントを作成するだけです。

私はできる限りあなたのコードを編集しようとしました。:)

追加情報: stopPropagation() の代わりに stopImmediatePropagation() を使用して、その行の後に他のイベントが実行されないようにします。

于 2013-01-31T09:52:42.077 に答える
0

これには多くの IF ステートメントは必要ありません。疑似コード的には、 のどこかを<body>クリックしてボタンを非表示にしますが、ボタンをクリックして別のことを行う必要があります。.click()またはを使用.on('click', function() . . .してこれを実現できます。

以下のコードを参照してください。

$('body').click(function(e) {
    if(e.target.id == "btn"){
        $('#box').show();
    }
    else
    {
        if(e.target.id !== 'box')
        {
            $('#box').hide();
        }
    }
});

...そしてあなたのマークアップ:

<body>
    <button id='btn'>Click me</button>
    <div id = "box" width="50px" height="50px"></div>
</body>

これは、このJSFIDDLEで確認できます。

いくつか重要なことを言いたいと思います。要素を動的に作成している場合は、減価償却されるため使用しないでください.live()。こちらのドキュメント.on()に記載されているものを使用してください。

それ以外は、上記のコードは問題なく動作します。この回答はスケーラブルであることを指摘したいと思います.他のものでは、コード内でe.preventDefault()参照するすべての要素に*配置または類似する必要がある場合があり.click()ます. このコードは、今後変更する必要はありません。

于 2013-01-31T09:53:11.530 に答える
0

これはあなたが探していた動作ですか？

$(document).click(function (e) {
    $("div").fadeToggle("fast");
      e.stopPropagation();
 });
$("button").click(function (e) {
  $("div").fadeToggle("slow");
  e.stopPropagation();
});
$("div").click(function (e) {    
      e.stopPropagation();
});

修正されたフィドル

編集されたコード:

$(document).click(function (e) {
    $("div").fadeToggle("fast");
    e.stopPropagation();

    if($("div").is(':visible')){
        $("div").click(function (e) {    
            e.stopPropagation();
        });
    }
});
$("button").click(function (e) {
    $("div").fadeToggle("slow");
    e.stopPropagation();
});

変更されたフィドル 2

編集2：

(document).click(function (e) {
   if($("div").is(':visible')){
         $("div").fadeToggle("fast");
    }
    $("div").click(function (e) {    
       e.stopPropagation();
    });
});
$("button").click(function (e) {
  $("div").fadeToggle("slow");
  e.stopPropagation();
});

変更されたフィドル 3

于 2013-01-31T09:57:57.047 に答える