Question

我已尝试实施我已找到但我不确定的答案，因为他们没有工作。

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

在那个小提琴中，如果.expand还有一个像这样的.expanded类，我试图将click事件绑定到body上。

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/

如果在外面点击，如何隐藏展开的div

1 个答案: