单击外部时隐藏列表

Question

我有一个 share link，单击它会显示 link 的列表。我正在使用 toggle 来隐藏和显示此列表。

当列表可见时，用户可以单击 share 隐藏（切换）link 列表的可见性。

但是，这样做的小问题是，link 的列表保持可见，直到用户通过按 share 切换列表。

我添加了这个脚本，以便在用户单击列表外部时关闭列表。

$(".meta-share").click(function() {
  event.preventDefault();
  $(".social-share").fadeToggle();
});

$(document).mouseup(function(e) {

  var container = $(".social-share");

  if (!container.is(e.target) && container.has(e.target).length === 0) {

    container.fadeOut();

  }
});

但是，toggle 现在无法正常工作。

有人能帮忙吗？

这里 jsFiddle 显示了问题。

Answer 1

那是因为你说当你点击目标和目标旁边时会淡出。当目标是 meta 时，你所要做的就是 return false——分享你的 document.mouseup.

$(".meta--share").click(function() {
  event.preventDefault();

  $(this.nextElementSibling).fadeToggle();
});

$(document).mouseup(function(e) {

 if(e.target.className == "meta--share"){
    return false;
 }
 var container = $(".social-share");

 if (!container.is(e.target) && container.has(e.target).length === 0) {

   container.fadeOut();

 }
});

这是您调整后的 fiddle：https://jsfiddle.net/9hpw15oq/2/

更新

在 .click 函数中。而不是通过 class 查找元素。 select 使用 .click 事件的元素。

我更新了代码 fiddle

Answer 2

此代码应该可以正常工作：

$(".meta--share").click(function() {
  event.preventDefault();
  if($('.social-share').is(':visible')){
   $(".social-share").fadeOut();
  }
  else{
  $(".social-share").fadeToggle();
  }

});

$(document).mouseup(function(e) {

  var container = $(".social-share");

  if (!container.is(e.target) && container.has(e.target).length === 0) {

    container.fadeOut();

  }
});

Answer 3

$(".meta--share").click(function() {
  event.preventDefault();
  $(".social-share").toggle();
});

$(document).mouseup(function(e) {

  var container = $(".social-share");

  if (!container.is(e.target) && container.has(e.target).length === 0) {

    container.fadeOut();

  }
});

.social-share {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li><a class="meta--share" href="#">Share</a>
    <ul class="social-share">
      <li class="facebook"><a title="Share on Facebook" href="#">Facebook</a></li>
      <li class="twitter"><a title="Share on Twitter" href="#">Twitter</a></li>
      <li class="linkedin"><a title="Share on Linked" href="#">Linkedin</a></li>
    </ul>
  </li>
</ul>

单击外部时隐藏列表

Hide a list when clicking outside

javascript

jquery

show

toggle

hide