javascript - 当用户单击页面上的任意位置时删除类

Question

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

$('.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 handler.) 元素如果没有关闭打开的 .social-networks 元素。

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

演示:Fiddle

<小时/>

使用传播(不喜欢这种方法，因为如果您在页面的其他部分需要类似的功能，如果停止传播，这些功能就会被破坏)

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

演示:Fiddle