javascript - Bootstrap Collapse show.bs.collapse 第二次不工作

Question

出于某种原因，即使我第一次执行完全相同的操作，我也无法再次触发显示。

基本上，我有一个表单，用户可以从下拉列表中选择前两个字段(商家提供商和银行)或添加新条目。因此，我在 Javascript 中使用 collapse 同时打开新行以添加新内容我隐藏了第一行，因此用户不会同时看到两行(选择并添加新行)。所以第一行一切正常(隐藏选择并显示添加)但在第二行只有折叠有效但隐藏行的 javascript 没有。

这是我的 HTML

 <div class="form-group" id="merchantRow">
    <label class="col-md-3 control-label" for="textinput">Merchant Provider</label>  
    <div class="col-md-7">
      <select id="merchantProvider">
        <option></option>
        <option value="AL">Alabama</option>
        <option value="WY">Wyoming</option>
      </select>
    </div>
    <div class="col-md-2"><a class="btn btn-sm btn-warning" data-toggle="collapse" data-target="#newMerchant"><i class="fa fa-plus"></i></a></div>
  </div>

  <div id="newMerchant" class="collapse">
    <div class="form-group">
      <label class="col-md-3 control-label" for="textinput">New Merchant Name / Slug</label>  
      <div class="col-md-4">
        <input id="textinput" name="textinput" type="text" placeholder="Name" class="form-control">
      </div>
      <div class="col-md-3">
        <input id="textinput" name="textinput" type="text" placeholder="Slug" class="form-control">
      </div>
      <div class="col-md-2"><a class="btn btn-sm btn-warning" data-toggle="collapse" data-target="#newMerchant"><i class="fa fa-repeat"></i></a></div>

    </div>
  </div>

  <div class="form-group" id="bankRow">
    <label class="col-md-3 control-label" for="textinput">Bank</label>  
    <div class="col-md-7">
      <select id="bank">
        <option></option>
        <option value="AL">Alabama</option>
        <option value="WY">Wyoming</option>
      </select>
    </div>
    <div class="col-md-2"><a class="btn btn-sm btn-info" data-toggle="collapse" data-target="#newBank"><i class="fa fa-plus"></i></a></div>
  </div>

  <div id="newBank" class="collapse">
    <div class="form-group">
      <label class="col-md-3 control-label" for="textinput">New Bank Name / Slug</label>  
      <div class="col-md-4">
        <input id="textinput" name="textinput" type="text" placeholder="Name" class="form-control">
      </div>
      <div class="col-md-3">
        <input id="textinput" name="textinput" type="text" placeholder="Slug" class="form-control">
      </div>
      <div class="col-md-2"><a class="btn btn-sm btn-info" data-toggle="collapse" data-target="#newBank"><i class="fa fa-repeat"></i></a></div>
    </div>
  </div>

这是我的简单 Javascript:

$('#newMerchant').on('show.bs.collapse', function() {
  $('#merchantRow').toggle();
}).on('hide.bs.collapse',function() {
  $('#merchantRow').toggle();
});

$('#newbank').on('show.bs.collapse', function() {
  $('#bankRow').toggle();
}).on('hide.bs.collapse',function() {
  $('#bankRow').toggle();
});

Answer 1

您的 HTML ID 是驼峰式的，而 JS 选择器是小写的。这些需要匹配。

<div id="newBank" class="collapse">
$('#newbank').on('show.bs.collapse'...