如何隐藏元素外部点击时的内容？

Question

我正在执行过滤器菜单下拉菜单，我需要通过单击内容的外部来隐藏菜单内容，为此我执行了一个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>

正确的结果应该是仅通过单击内容外部的菜单来隐藏唯一菜单的内容。

Answer 1

您的jQuery括号中有几个问题，等等。我已解决了这些问题。

如果您在某些地方使用“ showMeMore”功能，请确保对content使用不同的ID。

通过相对于父类引用类，您将只会影响该实例。我对代码进行了重大更改，并将添加一些注释。

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' && e.target.getAttribute('class') !== showContent.replace('.', '') && e.target.getAttribute('class') !== hideContent.replace('.', '') && $(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>