51

divユーザーが要素以外の場所をクリックすると非表示になるようにしようとしています。toggle()ユーザーがボタンをクリックすると、次のコードが実行されます。Details要素が表示されていて、画面の他の部分に反応する場合は、ボタンのクリックをプラスのままにします。

$('.nav-toggle').click(function() {
  //get collapse content selector
  var collapse_content_selector = $(this).attr('href');

  //make the collapse content to be shown or hide
  var toggle_switch = $(this);
  $(collapse_content_selector).toggle(function() {
    if ($(this).css('display') == 'none') {
      //change the button label to be 'Show'
      toggle_switch.html('Show Details');
    } else {
      //change the button label to be 'Hide'
      toggle_switch.html('Hide Details');
    }
  });
});
4

2 に答える 2

32

イベント委任の概念に頼ることができます。

$(function() {
    $(document).on('click', function(e) {
        if (e.target.id === 'div1') {
            alert('Div Clicked !!');
        } else {
            $('#div1').hide();
        }

    })
});​

フィドルをチェック

他のパーツと一体化する意味が分からなかった..これが基本的な考え方..

于 2012-10-04T05:07:10.330 に答える
4

このjQuery .blur()関数を使用して、ユーザーが他の要素（リンク、ボタンなど）をクリックしたときにdivを非表示にすることができます。

ぼかしイベントは、要素がフォーカスを失ったときに発生します（ユーザーがDOMツリーで別の要素を選択します）

あなたのトグルとのリンクがわかりません。トグルボタンがDIVを管理している場合、ボタンのテキストを更新すると同時に、divにhide（）/ show（）を配置する必要があるトグル関数内にあります。

于 2012-10-04T05:05:38.020 に答える