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处理程序传播点击。）元素如果没有关闭已打开的.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

当用户点击页面上的任何位置时删除课程

1 个答案: