Question

我遇到麻烦使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/（有趣的是，这段代码在这里正常运行，但在我的网站上却没有。）

非常感谢！

Answer 1

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

 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');

与

<div class="panel body"></div>

在我的functions.php中，现在正在使用。但是，当面板崩溃时，<div class="panel-collapse collapse"></div>内的内容溢出父details，加上折叠操作不是很“平滑”。它是跳跃/有弹性的。我必须使用以下样式向panel-collapse collapse div添加一个额外的.details { overflow: hidden; transition: all 0.3s; }类，以使其正常工作：

            for (int j = 0; j <= i; j++) {
                if (count > 8) {
                    index = index + 0;
                    count = 0;
                    break;
                }
                index = index + (count++ + 1).ToString();
                break;
            }

我希望它可以帮助任何有类似问题的人！

Woocommerce可折叠结账表

1 个答案: