Bootstrap 可折叠表单——一次只有一个面板可用答案

【问题标题】：Bootstrap Collapsible Form -- Just One Panel Available at a TimeBootstrap 可折叠表单——一次只有一个面板可用
【发布时间】：2017-01-16 01:11:05
【问题描述】：

我在我的网站上实现了以下 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 网站上的结帐表格。到目前为止，它功能齐全并且行为符合预期，但是，我想更进一步，在切换第一个面板（交货地址）时以某种方式禁用第二个和第三个面板（交货选项和付款）。然后，当用户单击“交付到此地址”按钮时，将启用第二个面板。此时，第一个面板（送货地址）将折叠但仍启用/可切换，第二个面板（交付选项）将被切换，第三个面板（付款）应禁用/不可切换。当用户单击“选择交付选项”时，应启用最后/第三个面板（付款）。第一个（送货地址）和第二个（送货选项）面板应该折叠但处于活动状态，第三个（付款）应该启用并切换。

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

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

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

【问题讨论】：

请注意，您的 HTML 中有重复的代码。即data-* 和href 属性都在panel-heading 和panel-title 上。此外，在一致性方面，您有一个名为 panel-shipping 的面板，其可折叠内容名为 collapse-delivery。
@Cooleronie 是的，我知道我在panel-heading 和panel-title 上都有data- 和href 属性。我希望整个标题都是可点击的，否则会让客户体验很差。他们应该能够通过单击标题上的任意位置来切换手风琴面板，而不仅仅是panel-title。谢谢！
然后只删除panel-title 中的那些以及随之而来的锚。
@Cooleronie 刚刚做了，效果很好。谢谢！但是现在我的箭头不是因为当面板切换时折叠的类没有附加到面板#2 和#3 的面板标题。您的 Plunker 也会发生同样的事情。有什么想法吗？

标签： javascript jquery twitter-bootstrap

【解决方案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> 的底部，这样更容易看到它的作用。

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

希望这会有所帮助。

【讨论】：

验证数据绝对是一个好点，不过，由于我对 PHP/Javascript 的所有东西都很陌生，我不太确定该怎么做。它很可能需要通过 AJAX 完成，因此当用户单击按钮并且正在验证表单时页面不会刷新。此外，它还有助于提升用户体验。
代码似乎可以正常工作，但现在我的箭头不是因为collapsed 类没有附加到面板#2 和#3 的panel-heading 切换面板时。您的 Plunker 也会发生同样的事情。有什么想法吗？
@AlexP。在 Plunker 中，我删除了箭头，因为它们对示例没有任何用途，<a> 标签内的所有内容也是如此。如果您可以使用带有工作箭头的 HTML+CSS（和 JS，如果有的话）提供 Plunker（或任何其他类似工具），我会为您研究它。
@AlexP。 You can do some validation with Jquery。或者简单地谷歌“javascript输入验证”，有大量的小插件只需要你为每个输入添加几个类。甚至HTML5 也可以选择需要输入（在表单内）。发送表单后，您可以在后端再次验证它，因为可以绕过 javascript。
这是小提琴：jsfiddle.net/9vjcoLxh 我不知道如何导入 ionicons 字体，所以我把它省略了。但是，transform: rotate(0deg); 问题无论如何都会可见。