我在我的网站上实现了以下 Bootstrap Accordion /可折叠表单。请看这个 fiddle :https://jsfiddle.net/eswv56ha/
这也是我的 HTML 标记:
<div class="panel-group" id="checkout-accordion">
<div class="panel panel-default checkout-panel" id="panel-billing">
<div class="panel-heading checkout-heading" data-toggle="collapse" data-parent="#checkout-accordion" href="#collapse-billing">
<h4 class="panel-title checkout-acc-title"> <a class="accordion-checkout" data-toggle="collapse" data-parent="#checkout-accordion" href="#collapse-billing">Delivery Address <i class="checkout-accordion-icon"></i></a> </h4>
</div>
<div id="collapse-billing" class="panel-collapse details collapse in">
<div class="panel-body checkout-inside">
Content First
<button id="toggle-delivery" type="button" class="btn-checkout" data-toggle="collapse" data-parent="#checkout-accordion" href="#collapse-delivery">Deliver to This Address</button>
</div>
</div>
</div>
<div class="panel panel-default checkout-panel" id="panel-shipping">
<div class="panel-heading checkout-heading" data-toggle="collapse" data-parent="#checkout-accordion" href="#collapse-delivery">
<h4 class="panel-title checkout-acc-title"> <a class="accordion-checkout collapsed" data-toggle="collapse" data-parent="#checkout-accordion" href="#collapse-delivery">Delivery Options <i class="checkout-accordion-icon"></i></a> </h4>
</div>
<div id="collapse-delivery" class="panel-collapse details collapse">
<div class="panel-body checkout-inside">
Content Second
<button id="toggle-payment" type="button" class="btn-checkout" data-toggle="collapse" data-parent="#checkout-accordion" href="#collapse-payment">Select Delivery Option</button>
</div>
</div>
</div>
<div class="panel panel-default checkout-panel" id="panel-payment">
<div class="panel-heading checkout-heading" data-toggle="collapse" data-parent="#checkout-accordion" href="#collapse-payment">
<h4 class="panel-title checkout-acc-title"> <a class="accordion-checkout collapsed" data-toggle="collapse" data-parent="#checkout-accordion" href="#collapse-payment">Payment <i class="checkout-accordion-icon"></i></a> </h4>
</div>
<div id="collapse-payment" class="panel-collapse details collapse">
<div class="panel-body checkout-inside">
Content Third
</div>
</div>
</div>
<div>
</div>
我对面板主体使用了虚拟内容，因为该内容是使用 PHP 动态生成的。 Accordion 取代了我的 WooCommerce 网站上的结账表单。到目前为止，它功能齐全并且行为符合预期，但是，我想更进一步，在切换第一个面板(送货地址)时以某种方式禁用第二个和第三个面板(送货选项和付款)。然后，当用户单击“递送到此地址”按钮时，将启用第二个面板。此时，第一个面板(送货地址)将折叠，但仍然启用/可切换，第二个面板(送货选项)将被切换，第三个面板(付款)应被禁用/不可切换。当用户单击“选择交付选项”时，应启用最后/第三个面板(付款)。第一个(送货地址)和第二个(送货选项)面板应折叠但处于事件状态，第三个面板(付款)应启用并切换。
一旦第三个面板被切换/激活/启用，其余面板将折叠，但仍然可以访问 - 即，如果用户想要返回其账单信息并更改地址或选择不同的交付选项。
理想情况下，我想将覆盖层应用于禁用的面板，如下所示:
当它们启用/事件时，覆盖层将逐渐被删除。我怎样才能做到这一点？
最佳答案
您需要使用 Javascript 来完成此操作。首先，请查看 Bootstrap's documentation对于切换可折叠元素时触发的事件。例如:
//Fires when #panel-delivery is triggered to be shown
$('#panel-delivery').on('show.bs.collapse', function() {
// Enable / Disable other panels here.
})
And this will work just fine as you can see here 。请注意，我更改了您的一些代码，因为您的标记到处都是。我把Jquery放在<body>的底部所以更容易看到它的作用。
我的建议是首先验证用户需要填写的内容，然后才能按下按钮访问下一个面板。可以像确保没有必需的输入为空一样简单。 (不是作为任何后端验证的替代品，而只是为了更好的用户体验)。
希望这有帮助。
关于javascript - Bootstrap 可折叠表单——一次只有一个面板可用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41661886/