ackyee 发表于 3 天前

请教WORDPRESS如果我要根据选项隐藏或者显示内容应该用什么控件

如题,比方说 我下面有3段内容,然后增加一个checkbox的选框,勾选上下面的选框,内容就显示三段, 不选中 内容就显示两段, 这种大家有弄过吗

kinoko 发表于 3 天前

checkbox的onchange事件判断选中,然后修改元素display属性就行了。
<script>
function demoDisplay(){
        if( document.getElementById("box1").checked )
        {
                document.getElementById("p2").style.display="inline";
        }
        else
        {
                document.getElementById("p2").style.display="none";
        }
}

</script>

<input id="box1" type="checkbox" onchange="demoDisplay()">
<p id="p1">文本p1。</p>
<p id="p2">文本p2。</p>

ackyee 发表于 3 天前

kinoko 发表于 2024-9-30 12:12
checkbox的onchange事件判断选中,然后修改元素display属性就行了。
(引用自2楼)

感谢回复 这个checkbox我也要用代码去实现吗? 默认的元素里好像没有checkbox

Himem 发表于 3 天前

GPT说:

在 WordPress 中实现根据选项(如复选框)来隐藏或显示内容,可以使用 JavaScript 和一些简单的 HTML 代码。以下是一个基本的示例,展示如何使用复选框来控制内容的显示和隐藏。

    在 WordPress 编辑器中添加 HTML 和 JavaScript:

    你可以在页面或文章的“文本”模式下添加以下代码:

    <label>
      <input type="checkbox" id="toggleContent"> 显示更多内容
    </label>

    <div id="content1">
      <p>这是第一段内容。</p>
    </div>
    <div id="content2">
      <p>这是第二段内容。</p>
    </div>
    <div id="content3" style="display: none;">
      <p>这是第三段内容。</p>
    </div>

    <script>
      document.getElementById('toggleContent').addEventListener('change', function() {
            var content3 = document.getElementById('content3');
            if (this.checked) {
                content3.style.display = 'block'; // 显示第三段内容
            } else {
                content3.style.display = 'none'; // 隐藏第三段内容
            }
      });
    </script>

    解释代码:
      这个代码片段创建了一个复选框和三段内容。
      第三段内容初始状态为隐藏(style="display: none;")。
      当复选框被勾选时,JavaScript 会监听复选框的变化,并根据复选框的状态来显示或隐藏第三段内容。

    使用页面构建器:
    如果你使用的是页面构建器(如 Elementor、WPBakery 等),通常它们会提供更直观的方式来实现类似的功能,可能会有内置的选项来控制内容的显示和隐藏。

    使用插件:
    你也可以考虑使用一些插件,如 "Content Control" 或 "WP ShowHide" 等,这些插件可以帮助你更轻松地管理内容的显示和隐藏,而无需编写代码。

通过以上方法,你可以根据复选框的状态来控制内容的显示和隐藏。希望这对你有帮助
页: [1]
查看完整版本: 请教WORDPRESS如果我要根据选项隐藏或者显示内容应该用什么控件