默认情况下，WooCommerce 中的产品选项卡自动打开第一个。是否可以默认将它们全部关闭，需要您单击它才能查看更多信息？
我尝试了以下代码，但似乎没有这样做。也许有一个 PHP 代码可以做到这一点或一些简单的东西？
我已经尝试过了，没有运气：
setTimeout(function() {
var $tabs = jQuery( '.wc-tabs, ul.tabs' ).first();
$tabs.parent().find('#tab-description').hide();
$tabs.parent().find( '.tab-title-description' ).removeClass('active');
}, 10);
【问题讨论】：
标签： php jquery wordpress woocommerce product
已更新 - 您应该尝试一下：
// Conditional Show hide checkout fields based on chosen shipping methods
add_action( 'wp_footer', 'close_all_product_tabs' );
function close_all_product_tabs(){
// Only on single product pages
if( ! is_product() ) return;
?>
<script>
jQuery(function($){
setTimeout(function() {
$('#tab-description').hide( function(){
$( 'li#tab-title-description' ).removeClass('active');
});
}, 200);
});
</script>
<?php
}
此代码在您的活动子主题（或主题）的 function.php 文件中或任何插件文件中。
经过测试并且可以工作
这是一个专门针对作者主题结构的自定义编辑：
jQuery(function($){
jQuery(function($){
setTimeout(function() {
$('#tab-description').hide( function(){
$( 'li#description_tab' ).removeClass('active');
});
}, 200);
});
});
现在，在您的主题中，所有您的内容标签都有一个专门的 <div> 容器，WooCommerce 默认没有：
<div class="tab-panels">
这个容器有一个灰色的边框和一些填充，所以当你隐藏描述选项卡时，它会像一个带有灰色边框的白色扁平矩形一样保持空白，这不是很好。所以你应该隐藏它或给他0不透明度
隐藏它您可以使用许多其他方式来处理它：
- `$('div.tab-panels').addClass('hidden');` and some CSS rules for this 'hidden' class
- `$('div.tab-panels').css('opacity', '0');`
- `$('div.tab-panels').css('visibility', 'hidden');`
一旦隐藏，您需要在单击按钮时使其可见（这是更难的部分）：
- `$('div.tab-panels').removeClass('hidden');`
- `$('div.tab-panels').css('opacity', '1');`
- `$('div.tab-panels').css('visibility', 'visible');`
最难的是让点击事件触发这个……
【讨论】：