Question

单击选择器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>

CodePen：https://codepen.io/brilliantmojo/pen/GRoyrKg

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>

Answer 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>

如何检查是否隐藏？

2 个答案: