Question

我已经设置了一个带有引导列，折叠和字段的表单，一切都正常但输入字段。我希望能够在点击时隐藏所有未选择的输入字段。

有办法做到这一点吗？

另外，我尝试使用$('.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">$2,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">$10,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">$25,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"上的Click事件侦听器。解决方案是绑定输入上的click事件并停止事件传播。

见小提琴： 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");
});

小提琴 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');
});

如何禁用输入隐藏点击

4 个答案: