javascript - Woocommerce 在加载时隐藏产品描述

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 切换功能。

切换函数将显示当前隐藏的元素，或者隐藏当前显示的元素。

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

<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>