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

当元素失去焦点时会触发 blur 事件（用户在 DOM 树上选择另一个元素）

我不明白与您的切换的链接。如果您的切换按钮管理 DIV，则它在切换功能中，您应该将 hide()/show() 放在 div 上，同时更新按钮的文本。

于 2012-10-04T05:05:38.020 回答