出于某种原因,即使我第一次执行完全相同的操作,我也无法再次触发显示。
基本上,我有一个表单,用户可以从下拉列表中选择前两个字段(商家提供商和银行)或添加新条目。因此,我在 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();
});
最佳答案
您的 HTML ID 是驼峰式的,而 JS 选择器是小写的。这些需要匹配。
<div id="newBank" class="collapse">
$('#newbank').on('show.bs.collapse'...
关于javascript - Bootstrap Collapse show.bs.collapse 第二次不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41668160/