Woocommerce可折叠结账表-Java 学习之路

我正在努力使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/（有趣的是，这个片段在这里正常工作，但不在我的网站上） .

谢谢你！

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> ，加上折叠操作不是很明显"smooth" . 它是跳跃/有弹性的 . 我必须使用以下样式向 panel-collapse collapse div添加一个额外的 details 类以使其工作：

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

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

回复于 2024-05-16T05:16:10+08:00

Woocommerce可折叠结账表

1 回答

相关问题