Javascript 当用户单击页面上的任何位置时删除类

我有两个按钮，当用户点击它时，它将切换/删除类

$('.social-toggle').on('click', function() {
  $('.social-networks').not($(this).next()).removeClass('open-menu')
  $(this).next().toggleClass('open-menu');
});

单击另一个共享按钮将在第一个框关闭的同时打开另一个框。 但是如果你想点击盒子外面的任何地方，就关闭它们。你知道我怎么做吗？ 这里还有我的HTML

<div class="share-button">
  <a href="#" class="social-toggle">Share</a>
<div class="social-networks">
  <ul>
    <li class="social-twitter">
      <a href="http://www.twitter.com">T</a>
    </li>
    <li class="social-facebook">
    <a href="http://www.facebook.com">F</a>
    </li>
    <li class="social-gplus">
    <a href="http://www.gplus.com">G+</a>
    </li>
  </ul>
</div>
   </div>

---

您可以为文档注册一个点击处理程序，然后检查目标是否是

.social toggle

（为了防止重复处理-另一个选项是停止从

.social toggle

处理程序]元素传播点击。如果不是，请关闭打开的

.social networks

元素

$(document).click(function (e) {
    if (!$(e.target).hasClass('social-toggle')) {
        $('.social-networks.open-menu').removeClass('open-menu')
    }
})

演示：

---

使用传播（不喜欢这种方法，因为如果你在页面的另一部分需要类似的功能，如果你停止传播就会被破坏）

---

演示：

使用

.blur（）

insteadRelated:。用它来删除类。@ZeeTee:

blur

与焦点相反，不是单击。非常确定OP想要什么它会工作

$('.social-toggle').on('click', function (e) {
    e.stopPropagation();
    $('.social-networks').not($(this).next()).removeClass('open-menu')
    $(this).next().toggleClass('open-menu');
});

$(document).click(function (e) {
    $('.social-networks.open-menu').removeClass('open-menu')
})