Question

我需要在产品页面中隐藏产品说明。但是当用户点击描述选项卡时，我需要显示内容。当用户再次点击时，我需要隐藏描述。它需要像toogle一样工作。

但我不能完成这个。请帮忙。为了隐藏页面加载的描述，我将以下脚本放在single-product.php

上

$('.wc-tab').hide();

它正在发挥作用。当页面加载时，它被隐藏，用户点击它会自动显示（description_tab active）。

但我需要隐藏每次点击。请帮忙

这是HTML结构

<ul class="tabs wc-tabs">
                            <li class="description_tab active">
                    <a href="#tab-description">Description</a>
                </li>
</ul>

谢谢。

Answer 1

单击应显示/隐藏描述的对象时，使用jQuery切换功能。

如果元素当前处于隐藏状态，则切换功能将显示该元素，如果当前显示该元素，则隐藏该元素。

＆＃13;

$(".wc-tabs").hide(); //start by hiding element
$("button").click(function() {
  $(".wc-tabs").toggle(); //toggle between hidden/shown when you click the button
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Click Me!</button>
<ul class="tabs wc-tabs">
                            <li class="description_tab active">
                    <a href="#tab-description">Description</a>
                </li>
</ul>

＆＃13;

Answer 2

您可以使用Jquery在页面加载时隐藏标签内容，然后在使用Jquery单击标签标题时可以显示它。

//删除空白标签 add_filter（'woocommerce_product_tabs'，'yikes_woo_remove_empty_tabs'，20，1）;

这是一个可以删除所有空白标签的功能：

add_filter( 'woocommerce_product_tabs', 'rf_woo_remove_empty_tabs', 20, 1 );
    function rf_woo_remove_empty_tabs( $tabs ) {

        if ( ! empty( $tabs ) ) {
            foreach ( $tabs as $title => $tab ) {
                if ( empty( $tab['content'] ) ) {
                    unset( $tabs[ $title ] );
                }
            }
        }
        return $tabs;
    }

如果要删除特定的选项卡，请使用以下功能。

add_filter( 'woocommerce_product_tabs', 'rf_remove_product_tabs', 98 );

function rf_remove_product_tabs( $tabs ) {

    unset( $tabs['description'] );          // Remove the description tab
    unset( $tabs['reviews'] );          // Remove the reviews tab
    unset( $tabs['additional_information'] );   // Remove the additional information tab

    return $tabs;

}

Woocommerce在加载时隐藏产品描述

2 个答案: