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

Question

我尝试实现我找到的答案，但不确定我是否理解，因为它们不起作用。

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

在那个 fiddle 中，我试图将点击事件绑定(bind)到主体，如果 .expand 也有一个 .expanded 类，如下所示:

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

如果访问者点击外部，切换 .expanded div 的最佳方式是什么？

另外，我欢迎对代码提出任何其他建议，因为这几乎是我使用 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/