如何隐藏展开的div，如果单击外部

Question

我试着实现我发现的答案，但我不确定我理解，因为它们不起作用。

我有这个JSFiddle: http://jsfiddle.net/cmscss/Gdn7Y/10/

在这个例子中，我试图将一个click事件绑定到body，如果。expand也有一个。expanded类，像这样:

if ($(expand).hasClass(".expanded")) {
  $('body').click(function () {
    $(expand).children(".expand-content").toggle();
    $(expand).toggleClass("expanded");
  });
}

如果访问者在外部点击，切换。expandeddiv的最好方法是什么?

另外，我欢迎任何关于代码的建议，因为这几乎是我用jQuery/JavaScript做的第一件事。

欢呼

Answer 1

试试下面的代码:

$(document).ready(function() {
  // cache classes
  var expand = $(".expand"),
      trigger = $(".expand-trigger");
  // if .expand is on the page
  if (expand.length > 0) {
    $(trigger).click(function () {
      expand.children(".expand-content").slideToggle();
      expand.toggleClass("expanded");
      return false; // stops browser jumping to top when triggers are clicked
    });
  }
    $('.expand-content').click(function(e){
        e.stopPropagation();
    });
  $('body').click(function () {
        if (expand.hasClass("expanded")) {      
            expand.children(".expand-content").slideToggle();
            expand.toggleClass("expanded");      
        }
    });
});

这里是JSFiddle

http://jsfiddle.net/qqjPL/