Question

我有一个toggle链接，显示点击时的链接列表。我正在使用share隐藏并显示此列表。

当列表可见时，用户可以点击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

但是，^.{9}(.{24}).{22}(.{16}).{2}现在无法正常工作。

有人可以帮忙吗？

这是显示问题的jsFiddle。

Answer 1

那是因为当你点击目标并且在目标旁边时你说要淡化。所有你需要做的就是当你的document.mouseup中的目标是元共享时返回false。

$(".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();

 }
});

这是你调整过的小提琴：https://jsfiddle.net/9hpw15oq/2/

<强>更新

.click函数中的

。而不是通过类寻找元素。使用.click事件选择元素。

我已经更新了代码和小提琴

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>

单击外部时隐藏列表

3 个答案: