selecting select 选项 toggleClass 不强制关闭时怎么办

Question

我制作了一个按钮，可以使用 select 选项来 select 乘客人数。但是当我select强制关闭乘客人数时出现了问题。

selecting客号不强制关闭怎么办

提前致谢

我把他的代码放在 > 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

问题：

您应该使用 < 或当您想将 < 插入文档时使用文本节点。它修复了语法突出显示，生成更安全和健壮的代码。（不太可能运行陷入错误）。当您使用 <（改为使用 >）时，您尤其应该这样做。
您可以通过检查目标的父级或目标本身是否为 select 标签来修复它。感谢 charlietfl 指出这一点。我刚刚在 Internet Explorer 和 Firefox 中对此进行了测试。它适用于两者。如果它不是 select 标签，则更新 s.
您可以选择重组您的代码。如果要只按钮修改可见性。您可以简单地停止按钮包含下拉菜单。或者您可以更改最接近的值以检查 .passenger-box.

如有问题请评论

$(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();
  });
});

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

Answer 2

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

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

$(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 3

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

看这个例子：https://jsfiddle.net/negzoqca/

或者，您可以检查用户是否正在单击 passenger-box 或其子项之一，如果是，则不切换 class。像这样：

https://jsfiddle.net/e0yjb5Lw/

Answer 4

根据您的代码，即使您点击 3 个下拉菜单，div.btn-passenger 元素也会获得点击事件，因为它们都在 div element.And 内，我明白了单击事件打开和关闭可见性。这就是为什么当您尝试 select 一个项目时所有下拉菜单都会消失的原因。

或许，最好用按钮替换 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>

看看这个fiddle：https://jsfiddle.net/huxgcj0q/1/

selecting select 选项 toggleClass 不强制关闭时怎么办

How to do when selecting select option toggleClass not force close

javascript

jquery

html-select

twitter-bootstrap