如何禁用单击时隐藏输入

Question

我设置了一个包含 bootstrap 列、折叠和字段的表单，除输入字段外，一切正常。我希望能够在单击时隐藏所有未选择的输入字段。

有办法吗？

此外，我尝试使用 $('.collapse').collapse("hide");，它会隐藏所有其他未选择的字段，但在尝试输入文本时，该字段会隐藏。

HTML

<form>
  <div class="row">

    <div class="col-xs-4 pricing-wrap">
      <label class="pricing text-center" data-toggle="collapse" data-target="#con-amount-wrap" aria-expanded="false" aria-controls="con-amount-wrap">
        <div class="panel panel-default panel-pricing text-center">
          <div class="panel-body">
            <span class="min-ammount small">Minimum Deposit</span>
            <h3 class="panel-amount">,500</h3>
          </div>
        </div>
      </label>
      <!-- Deposit Amount -->
      <div class="collapse" id="con-amount-wrap">
        <div class="top-buffer-sm">
          <div class="input-group">
            <span class="input-group-addon">$</span>
            <input type="text" class="form-control" name="con_amount" id="con_amount" placeholder="Deposit Amount" />
          </div>
        </div>
      </div>
    </div>

    <div class="col-xs-4 pricing-wrap">
      <label class="pricing text-center" data-toggle="collapse" data-target="#mod-amount-wrap" aria-expanded="false" aria-controls="mod-amount-wrap">
        <div class="panel panel-default panel-pricing text-center">
          <div class="panel-body">
            <span class="min-ammount small">Minimum Deposit</span>
            <h3 class="panel-amount">,000</h3>
          </div>
        </div>
      </label>
      <!-- Deposit Amount -->
      <div class="collapse" id="mod-amount-wrap">
        <div class="top-buffer-sm">
          <div class="input-group">
            <span class="input-group-addon">$</span>
            <input type="text" class="form-control" name="mod_amount" id="mod_amount" placeholder="Deposit Amount" />
          </div>
        </div>
      </div>
    </div>

    <div class="col-xs-4 pricing-wrap">
      <label class="pricing text-center" data-toggle="collapse" data-target="#adv-amount-wrap" aria-expanded="false" aria-controls="adv-amount-wrap">

        <div class="panel panel-default panel-pricing text-center">
          <div class="panel-body">
            <span class="min-ammount small">Minimum Deposit</span>
            <h3 class="panel-amount">,000</h3>
          </div>
        </div>
      </label>
      <!-- Deposit Amount -->
      <div class="collapse" id="adv-amount-wrap">
        <div class="top-buffer-sm">
          <div class="input-group">
            <span class="input-group-addon">$</span>
            <input type="text" class="form-control" name="adv_amount" id="adv_amount" placeholder="Deposit Amount" />
          </div>
        </div>
      </div>
    </div>

  </div>
</form>

JS

$(".pricing-wrap").click(function (e) {
  $(this).addClass("selected").siblings().removeClass("selected");
  $('.collapse').collapse("hide");
});

Answer 1

您使用 $('.collapse').collapse("hide"); 的方法是正确的，问题是当您单击输入以聚焦它时，事件会传播并触发 ".pricing-wrap" 上的单击事件侦听器。解决方案是在输入上绑定点击事件并停止事件传播。

参见fiddle： https://jsfiddle.net/m31ucxvj/3/

Answer 2

您需要过滤掉当前选中的.pricing-wrap

$(".pricing-wrap").click(function (e) {
  $(this).addClass("selected").siblings().removeClass("selected");
  $('.collapse').filter(function(){
     return !$(this).closest('.pricing-wrap').hasClass("selected");
  }).collapse("hide");
});

Fiddle https://jsfiddle.net/okkqw2we/4/

Answer 3

虽然标签和输入字段都在同一个容器中，所以当您点击输入框时，它会触发点击包装器。所以你需要在标签上添加事件并使用 parent() 找到它的包装器并处理它

$(".pricing").click(function (e) { $(this).parent().addClass("selected").siblings().removeClass("selected"); $('.collapse').collapse("hide"); });

https://jsfiddle.net/farazadeo/okkqw2we/5/

Answer 4

简单的方法

$(".pricing-wrap").click(function (e) {
    var $s = $(this).addClass("selected");
    $s.siblings()
    .removeClass("selected")
    .find('.collapse.in').removeClass('in');
});

如何禁用单击时隐藏输入

How to disable Input hide on click

html

javascript

jquery

twitter-bootstrap

twitter-bootstrap-3