Question

我正在尝试在我的网站上实现Bootstrap可折叠面板，但有些东西不能正常工作。我的目的是将默认的WooCommerce选项卡更改为折叠面板/手风琴。这是我用来覆盖WooCommerce的tabs.php文件的代码：

<?php
/**
* Single Product tabs
*
* @author WooThemes
* @package WooCommerce/Templates
* @version 2.0.0
*/

if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly
}

/**
* Filter tabs and allow third parties to add their own
*
* Each tab is an array containing title, callback and priority.
* @see woocommerce_default_product_tabs()
*/
$tabs = apply_filters( 'woocommerce_product_tabs', array() );

if (!empty($tabs)):
?>

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">

  <?php foreach ( $tabs as $key => $tab ) : ?>

  <div class="panel panel-default">
    <div class="panel-heading" role="tab">
      <h4 class="panel-title">
        <a data-toggle="collapse" role="button" data-parent="#accordion" href="#collapse-<?php echo $key ?>" class="collapsed">
          <?php echo apply_filters( 'woocommerce_product_' . $key . '_tab_title', $tab['title'], $key ) ?>
        </a>
      </h4>
    </div>
    <div id="collapse-<?php echo $key ?>" class="panel-collapse collapse">
      <div class="panel-body">
        <?php call_user_func( $tab['callback'], $key, $tab ) ?>
      </div>
    </div>
  </div>

  <?php endforeach; ?>

</div>

<?php 
endif;
?>
</div><!-- .summary -->

面板运行良好，唯一的例外是我一次只能打开一个面板。如果我尝试切换第二个面板，其他面板就不应该崩溃。我之前已成功实施了这些面板，但现在显然已经关闭了。

我怀疑它可能与jQuery库有关，因为此时它不包含在任何地方。我尝试使用<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>和<script src="https://code.jquery.com/jquery-1.12.2.min.js" integrity="sha256-lZFHibXzMHo3GGeehn1hudTAP3Sc0uKXBXAzHX1sjtk=" crossorigin="anonymous"></script>，但无济于事。

小提琴：link（请注意：我已删除了PHP代码，并为面板标题和内容插入了一些虚拟文本。在我的情况下，我只有2个面板，而不是3个。）

有什么建议吗？

更新：此处输出的HTML：https://jsfiddle.net/e2vc545g/（我无法添加网页的整个HTML代码，因为它超过3,000个字符）

Answer 1

基于您发布的小提琴，您的标记存在许多问题。

你有嵌套的脚本标签
具有相同ID的多个元素
无效的引导程序标记

我发布了一个解决这些问题的小提琴here

任何其他问题都应该放在一个新问题中，不要在这里继续。

此处实施的更改必须备份到您的php页面

<强> HTML

function alternativeCase(string){
  return string.split('').map(function(c,i) {
    return i & 1 ? c.toUpperCase() : c.toLowerCase();
  }).join('');
}

Bootstrap Collapse：一次只有一个面板（可能是jQuery库问题）

1 个答案: