javascript - 选择选择选项toggleClass时不强制关闭怎么办

Question

我制作了一个按钮，可以通过选择选项来选择乘客数量。但是当我选择强行关闭乘客数量时出现了问题。

选择乘客号码时不强制关闭怎么办。

提前致谢

我把他的代码放在> https://jsfiddle.net/devefrontend/vaqdsmjk/1/上

$(document).ready(function() {
  $(".btn-passenger").on('click', function(e) {
    $(".passenger-box").toggleClass("s");
    e.stopPropagation();
  });
});

.btn-passenger {
  background-color: #eee;
  display: inline-block;
  height: 45px;
  cursor: pointer;
}

.passenger-box.s {
  visibility: visible;
  opacity: 1;
  transition: all .3s ease;
}

.passenger-box {
  padding: 10px 20px;
  background-color: #fff;
  border: 1px solid #eee;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  margin-top: 7px;
  position: relative;
  z-index: 99;
  opacity: 0;
  visibility: hidden;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="btn-passenger">
  <i class="fa fa-user" aria-hidden="true"></i>
  <span id="count">0 click button</span>
  <i class="fa fa-angle-down" aria-hidden="true"></i>
  <div class="passenger-box">
    <label>Dewasa 12+ Thn</label>
    <select name="adult" id="adult" class="form-control passenger">
      <option selected="selected">1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
      <option>6</option>
    </select>
    <label>Anak 2-12 Thn</label>
    <select name="child" id="child" class="form-control passenger">
      <option>0</option>
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
      <option>6</option>
    </select>
    <label>Bayi
      < 2 Thn</label>
        <select name="infant" id="infant" class="form-control passenger">
          <option>0</option>
          <option>1</option>
          <option>2</option>
          <option>3</option>
          <option>4</option>
          <option>5</option>
          <option>6</option>
        </select>
  </div>
</div>

Answer 1

这确实是一个布局设计缺陷，但如果您必须使用此布局，请检查目标是否在乘客厢内。

如果将实际的按钮元素包装到它们自己的容器中，就不会出现此问题

$(document).ready(function() {
  $(".btn-passenger").on('click', function(e) {
    if (!$(e.target).closest('.passenger-box').length) {
      $(".passenger-box").toggleClass("s");
    }
  });
});

.btn-passenger {
  background-color: #eee;
  display: inline-block;
  height: 45px;
  cursor: pointer;
}

.passenger-box.s {
  visibility: visible;
  opacity: 1;
  transition: all .3s ease;
}

.passenger-box {
  padding: 10px 20px;
  background-color: #fff;
  border: 1px solid #eee;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  margin-top: 7px;
  position: relative;
  z-index: 99;
  opacity: 0;
  visibility: hidden;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="btn-passenger">
  <i class="fa fa-user" aria-hidden="true"></i>
  <span id="count">0 click button</span>
  <i class="fa fa-angle-down" aria-hidden="true"></i>
  <div class="passenger-box">
    <label>Dewasa 12+ Thn</label>
    <select name="adult" id="adult" class="form-control passenger">
      <option selected="selected">1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
      <option>6</option>
    </select>
    <label>Anak 2-12 Thn</label>
    <select name="child" id="child" class="form-control passenger">
      <option>0</option>
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
      <option>6</option>
    </select>
    <label>Bayi
      < 2 Thn</label>
    <select name="infant" id="infant" class="form-control passenger">
          <option>0</option>
          <option>1</option>
          <option>2</option>
          <option>3</option>
          <option>4</option>
          <option>5</option>
          <option>6</option>
        </select>
  </div>
</div>