Woocommerce 可折叠结帐表格答案

【问题标题】：Woocommerce Collapsible Checkout FormWoocommerce 可折叠结帐表格
【发布时间】：2017-05-28 00:21:26
【问题描述】：

我无法使 WooCommerce 可折叠结帐表单正常工作。我为此使用 Bootstrap Collapse，这是我的 HTML 标记：

<div class="panel-group" id="checkout-accordion">
  <div class="panel panel-default" id="panel-billing">
    <div class="panel-heading">
      <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#checkout-accordion" href="#collapse-billing">Delivery Address</a> </h4>
    </div>
    <div id="collapse-billing" class="panel-collapse collapse">
      <div class="panel-body">
            <div class="col2-set" id="customer_details">
            <div class="col-1">
                <?php
    do_action('woocommerce_checkout_billing');
?>
           </div>

            <div class="col-2">
                <?php
    do_action('woocommerce_checkout_shipping');
?>
           </div>
        </div>
        <button id="next1" type="button" class="btn btn-success" data-toggle="collapse" data-parent="#checkout-accordion" href="#collapse-delivery"> Next </button>
      </div>
    </div>
  </div>


  <div class="panel panel-default" id="panel-shipping">
    <div class="panel-heading">
      <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#checkout-accordion" href="#collapse-delivery">Delivery Options</a> </h4>
    </div>
    <div id="collapse-delivery" class="panel-collapse collapse">
      <div class="panel-body">
          <?php
if (WC()->cart->needs_shipping() && WC()->cart->show_shipping()):
?>

            <?php
    do_action('woocommerce_review_order_before_shipping');
?>

            <?php
    wc_cart_totals_shipping_html();
?>

            <?php
    do_action('woocommerce_review_order_after_shipping');
?>

        <?php
endif;
?>
        <button id="next2" type="button" class="btn btn-success" data-toggle="collapse" data-parent="#checkout-accordion" href="#collapse-payment"> Next </button>
      </div>
    </div>
  </div>
</div>

我们的想法是制作一个包含不同部分的手风琴。默认情况下，第一部分将可见，但默认情况下其他部分将不可切换。它们将显示为灰色，就好像它们不可编辑/可选择一样。填写表格的第一部分后，将出现一个“下一步”按钮，用于切换手风琴的下一部分（默认情况下隐藏）。以此类推。

但是，一旦切换下一部分，前一部分就会崩溃，这不会发生。我想要一次只打开一个面板。我究竟做错了什么？我检查了，我很确定标记是正确的，所以我非常感谢一些输入/建议。

这是一个小提琴：https://jsfiddle.net/hdpgp9sf/（有趣的是，sn-p 在这里正常工作，但在我的网站上却没有）。

非常感谢！

【问题讨论】：

你的项目中是否包含 jquery 和 bootstrap.js？
你有任何控制台错误吗？有实时链接吗？

标签： php html twitter-bootstrap woocommerce accordion

【解决方案1】：

问题实际上是“bootstrap.js”文件。我换了

function wpbootstrap_scripts_with_jquery()
{
    // Register the script like this for a theme:
    wp_register_script( 'custom-script', get_template_directory_uri() . '/bootstrap/js/bootstrap.js', array( 'jquery' ) );
// For either a plugin or a theme, you can then enqueue the script:
    wp_enqueue_script( 'custom-script' );
}
add_action( 'wp_enqueue_scripts', 'wpbootstrap_scripts_with_jquery' );

与

 function xobamax_resources() {
    wp_enqueue_script( 'bootstrap-js', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js', array('jquery'), '3.3.4', true );

}
add_action('wp_enqueue_scripts', 'xobamax_resources');

在我的functions.php 中，现在正在工作。但是，当面板折叠时，<div class="panel body"></div> 内部的内容会溢出父级 <div class="panel-collapse collapse"></div>，加上折叠动作不是很“流畅”。它是跳跃/有弹性的。我必须使用以下样式向 panel-collapse collapse div 添加一个额外的 details 类才能使其工作：

.details {
    overflow: hidden;
    transition: all 0.3s;
}

希望对遇到类似问题的人有所帮助！

【讨论】：