Question

我在我的网站上实现了以下Bootstrap手风琴/可折叠表格。请看这个小提琴：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">&#xe04b;</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">&#xe04b;</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">&#xe04b;</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动态生成的。手风琴取代了我的WooCommerce网站上的结账表格。到目前为止，它功能齐全，行为与预期一致，但是，当我切换第一个（交付地址）时，我想更进一步，以某种方式禁用第二个和第三个面板（交付选项和付款）。然后，当用户单击“发送到此地址”按钮时，将启用第二个面板。此时，第一个面板（交付地址）将折叠但仍然启用/可切换，第二个（交付选项）将被切换，第三个（付款）应被禁用/不可切换。当用户单击“选择传递选项”时，应启用最后/第三个面板（付款）。应该折叠第一个（传递地址）和第二个（传递选项）面板但是应该激活，并且应该启用和切换第三个（付款）。

一旦第三个面板被切换/激活/启用，其余部分将被折叠，但仍然可访问 - 即，如果用户想要返回她的账单信息并更改地址或选择不同的传送选项。

理想情况下，我想对已禁用的面板应用叠加层，如下所示：

当它们变为启用/激活时，叠加层将逐渐被移除。我怎样才能做到这一点？

Answer 1

您需要使用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>的底部，这样就可以更容易地看到它的作用。

我的建议是首先验证用户需要填写的内容，然后才能按下按钮访问下一个面板。可以简单到确保没有必要的输入为空。（不是替代任何后端验证，而只是为了更好的用户体验）。

希望这会有所帮助。

Bootstrap可折叠表单 - 一次只能使用一个面板

1 个答案: