选择选项时，如何选择toggleClass而不强制关闭

Question

我做了一个按钮，用于通过选择选项选择乘客数量。但是当我选择接近的乘客数量时出现了问题。

选择乘客号码时的操作方法并非强制关闭。

提前致谢

我已将他的代码放在＆gt; https://jsfiddle.net/devefrontend/vaqdsmjk/1/

＆＃13;

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>

Answer 2

<强>的问题：

1. 如果要将<插入文档，则应使用<或使用文本节点。它修复了语法突出显示，产生更安全和健壮的代码。 （不太可能遇到错误）。当您使用<时（尤其是使用>），您应该特别这样做。

2. 您可以通过检查目标的父级或目标本身是否为select标记来解决此问题。感谢 charlietfl 指出这一点。我刚刚在Internet Explorer和Firefox中对此进行了测试。它适用于两者。如果它不是选择标记，则您更新s的可见性。

3. 您可以选择重新构建代码。如果您只想 按钮来修改可见性。您只需停止包含下拉列表的按钮即可。或者您可以更改最近的内容以检查.passenger-box。

评论是否有问题

＆＃13;
＆＃13;
$(document).ready(function(e) {
  $(".btn-passenger").on('click', function(e) {
    if (!$(e.target).closest("select").length) { //ADDED IF STATEMENT
      $(".passenger-box").toggleClass("s");
    }
    e.stopPropagation();
  });
});
＆＃13;
.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;
}
＆＃13;
<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
      &lt; 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>
＆＃13;
＆＃13;
＆＃13;

Answer 3

我建议将可点击区域缩小，最好是可以访问的按钮（例如，键盘无法访问可点击的div）。

请参阅此示例：https://jsfiddle.net/negzoqca/

或者，您可以检查用户是否正在点击passenger-box或其中一个孩子，如果是，则不会切换课程。像这样：

https://jsfiddle.net/e0yjb5Lw/

Answer 4

根据你的代码，div.btn-passenger元素获取click事件，即使你点击3个下拉列表，因为它们都在div元素内。并且，我看到click事件可以打开和关闭可见性。这就是为什么当您尝试选择项目时所有下拉列表都会消失的原因。

也许，用按钮替换div.btn-passenger元素会更好。

<input type="button" value="0 click buttton" class="btn-passenger"/>

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

看看这个小提琴：https://jsfiddle.net/huxgcj0q/1/