Скрыть список при нажатии за пределами - PullRequest
Новая
       22

Скрыть список при нажатии за пределами

0 голосов
/ 31 мая 2018

У меня есть ссылка share, которая показывает список ссылок при нажатии.Я использую 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 теперь не работает должным образом.

Кто-нибудь может помочь?

Вот jsFiddle , показывающийпроблема.

Ответы [ 3 ]

0 голосов
/ 31 мая 2018

Этот код должен работать нормально: 

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

  }
});
0 голосов
/ 31 мая 2018 

$(".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>
0 голосов
/ 31 мая 2018

это потому, что вы говорите исчезать, когда нажимаете на цель и рядом с ней.все, что вам нужно сделать, это вернуть 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();

 }
});

вот ваша отрегулированная скрипка: https://jsfiddle.net/9hpw15oq/2/

Обновить

в функции .click.вместо того, чтобы искать элемент через класс.выберите элемент, используя событие .click.

Я обновил код и скрипку

...