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

Question

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

$('.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>

JSFIDDLE

Answer 1

您可以为文档注册一个单击处理程序，然后检查目标是否是.social-toggle(为了防止双重处理-另一个选项是停止从.social-toggle处理程序传播单击)。元素(如果不关闭打开的.social-networks元素)。

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

演示：小提琴

使用传播(不是这种方法的粉丝，因为如果您需要在页面的另一部分中使用类似的功能，如果您停止传播，就会被破坏)。

$('.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')
})

演示：小提琴