javascript - 如何检查是否隐藏？

Question

When selector A is clicked or outside of selector BI want selector B to .toggle(). 这很简单。

但是，除非单击选择器 A，否则我不希望选择器 B.toggle()后退——而不是在您单击选择器 A 或 B 外部时。这是我无法弄清楚的部分。

$(document).ready(function() {
  var Container = $(".redBar"); // Container (selector A)

  function Toggle() {
    Container.toggleClass("hide"); // Toggle Container with display none selector [to hide selector B]
  }

  // If selector B is visible
  if ($(Container).is(":visible")) {
    // On click of the document and selector A
    $(document, ".toggleBar").on("click", function(event) {
      // If the target of the click isn't selector A nor a descendant of selector A
      if (!Container.is(event.target) && Container.has(event.target).length === 0) {
        Toggle();
      }
    });
  }
});

/* Selector A */
.toggleBar {
  width: 150px;
  color: blue;
  text-transform: uppercase;
  font-weight: bold;
}

.toggleBar:hover {
  text-decoration: underline;
  cursor: pointer;
}


/* Selector B */
.redBar {
  width: 300px;
  height: 50px;
  color: white;
  text-transform: uppercase;
  font-weight: bold;
  background-color: red;
}

.hide {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="redBarContainer">
  <!-- selector A -->
  <div class="toggleBar">toggle bar</div>

  <!-- selector B -->
  <div class="redBar"></div>
</div>

代码笔： https ://codepen.io/brilliantmojo/pen/GRoyrKg

标签： javascripthtmljquerycssfrontend

Answer 1

根据您要执行的操作的描述，一种更简单的方法是将toggle()调用附加到.toggleBar元素的单击，然后仅hide()在元素外部发生单击时，如下所示：

jQuery($ => {
  let $redBar = $('.redBar');

  $('.toggleBar').on('click', e => {
    e.stopPropagation();
    $redBar.toggle();
  });
  
  $(document).on('click', (e) => {
    if ($redBar[0] !== e.target)
      $redBar.hide();
  });
});

/* Selector A */
.toggleBar {
  width: 150px;
  color: blue;
  text-transform: uppercase;
  font-weight: bold;
}

.toggleBar:hover {
  text-decoration: underline;
  cursor: pointer;
}


/* Selector B */
.redBar {
  width: 300px;
  height: 50px;
  color: white;
  text-transform: uppercase;
  font-weight: bold;
  background-color: red;
}

.hide {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="redBarContainer">
  <!-- selector A -->
  <div class="toggleBar">toggle bar</div>

  <!-- selector B -->
  <div class="redBar"></div>
</div>