如何检查是否隐藏？答案

【问题标题】：How do I check if hidden?如何检查是否隐藏？
【发布时间】：2020-07-07 16:56:47
【问题描述】：

当单击选择器 A 或在选择器 B 之外时，我希望选择器 B 为 .toggle()。这很简单。

但是，我不希望选择器 B 回到 .toggle()，除非单击选择器 A - 当您在选择器 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

【问题讨论】：

$(document, ".toggleBar").on("click", function(event) { 没有意义。不知道为什么要使用元素的上下文。

标签： javascript html jquery css frontend

【解决方案1】：

根据您要执行的操作的描述，一种更简单的方法是将toggle() 调用附加到对.toggleBar 元素的单击，然后在单击发生在元素，像这样：

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>

【讨论】：

【解决方案2】：

您可以简单地记录单击整个文档和单独的.toggleBar 并使其按您想要的方式工作

$(document).click(function(event) {
    if (event.target !== $('.redBar')[0]) {
      $('.redBar').addClass('hide');
    }
});
$(".toggleBar").click(function(event){
    event.stopPropagation();
    $('.redBar').toggleClass('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>

【讨论】：