Bootstrap崩潰show.bs.collapse再次無法正常工作

Question

由於某種原因，即使我第一次做完全相同的事情，我也無法再次播放。

基本上，我有一個表單，用戶可以在前兩個字段（商戶提供者和銀行）中從下拉列表中進行選擇或添加新條目。 因此，我使用折疊在Javascript中同時打開新行以添加新內容，因此隱藏了第一行，因此用戶不會同時看到兩行（選擇並添加新行）。 因此，所有內容都適用於第一行（隱藏選擇並顯示添加），但是在第二行上，僅折疊有效，而隱藏行的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'...