Блог

Главная - Вопросы по программированию - Как скрыть содержимое при нажатии за пределами элемента?

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

#jquery

#jquery

Вопрос:

Я создаю выпадающее меню фильтра, и мне нужно скрыть содержимое меню, щелкнув вне содержимого, я создал для этого функцию jquery, чтобы я мог использовать ее во многих меню фильтров, но прямо сейчас, если я нажимаю вне содержимого, скрываются все фильтры, в которых я использую функцию.

Мой код:

 showMeMore = (showContent, hideContent, content) => {

    $(showContent).show();
    $(hideContent).hide();

    $(showContent).on('click', function() {
      $(content).slideToggle();
      $(showContent).hide();
      $(hideContent).show();
    });

    $(hideContent).on('click', function(e) {
      e.preventDefault();
      $(content).slideToggle();
      $(showContent).show();
      $(hideContent).hide();
    });

    $('html').click(function(e) {
      if (e.target.id == content) {
        $(content).show();
      } else {
        $(content).hide();
      }
    });

    showMeMore(".__collapser--quantity", ".__collapser--quantity--close",
      "#__selector--quantity");  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container__flex--between filter__top__box filter__top__box-quantity container__position--absolute">
  <div class="__selection--box">
    <span class="__title container__flex--between">Mostrar
            <i class="__collapser--quantity" data-feather="chevron-down"></i>
            <i class="__collapser--quantity--close" data-feather="chevron-up"></i>
        </span>
    <ul id="__selector--quantity" class="__select">
      <li class="__option"><a href="#" class="__anchor">12 productos</a></li>
      <li class="__option"><a href="#" class="__anchor">24 productos</a></li>
      <li class="__option"><a href="#" class="__anchor">48 productos</a></li>
      <li class="__option"><a href="#" class="__anchor">96 productos</a></li>
      <li class="__option"><a href="#" class="__anchor">Todos</a></li>
    </ul>
  </div>
</div>

Правильный результат этого должен скрывать содержимое уникального меню только при нажатии за пределами содержимого.

Ответ №1:

У вас есть несколько проблем в вашем jQuery с закрывающими фигурными скобками и т.д. Я исправил это.

Если вы используете функцию «showMeMore» в нескольких местах, убедитесь, что вы используете разные идентификаторы для content .

Ссылаясь на классы в отношении родительского элемента, вы будете влиять только на этот экземпляр. Я существенно изменил код и добавлю несколько комментариев.

 showMeMore = (showContent, hideContent, content) => {

  var parent = $(content).closest('.__selection--box');

  $(parent).find(showContent).show();
  $(parent).find(hideContent).hide();

  $(parent).find(showContent).on('click', function(e) {
    e.preventDefault();
    var parent = $(this).closest('.__selection--box');
    $(parent).find(content).slideToggle();
    $(parent).find(showContent).hide();
    $(parent).find(hideContent).show();
  });

  $(parent).find(hideContent).on('click', function(e) {
    e.preventDefault();
    var parent = $(this).closest('.__selection--box');
    $(parent).find(content).slideToggle();
    $(parent).find(showContent).show();
    $(parent).find(hideContent).hide();
  });

  $('html').click(function(e) {
    if (e.target.getAttribute('class') !== '__selection--box' amp;amp; e.target.getAttribute('class') !== showContent.replace('.', '') amp;amp; e.target.getAttribute('class') !== hideContent.replace('.', '') amp;amp; $(content   ':visible').length > 0) {
      $(parent).find(content).slideToggle();
      $(parent).find(showContent).toggle();
      $(parent).find(hideContent).toggle();
    }
  });
}


showMeMore(".__collapser--quantity", ".__collapser--quantity--close",
  "#__selector--quantity");  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container__flex--between filter__top__box filter__top__box-quantity container__position--absolute">
  <div class="__selection--box">
    <span class="__title container__flex--between">Mostrar
            <i class="__collapser--quantity" data-feather="chevron-down">v</i>
            <i class="__collapser--quantity--close" data-feather="chevron-up">^</i>
        </span>
    <ul id="__selector--quantity" class="__select">
      <li class="__option"><a href="#" class="__anchor">12 productos</a></li>
      <li class="__option"><a href="#" class="__anchor">24 productos</a></li>
      <li class="__option"><a href="#" class="__anchor">48 productos</a></li>
      <li class="__option"><a href="#" class="__anchor">96 productos</a></li>
      <li class="__option"><a href="#" class="__anchor">Todos</a></li>
    </ul>
  </div>
</div>