amobbs.com 阿莫电子技术论坛

标题: 请教WORDPRESS如果我要根据选项隐藏或者显示内容应该用什么控件 [打印本页]

作者: ackyee 时间: 2024-9-30 10:38
标题: 请教WORDPRESS如果我要根据选项隐藏或者显示内容应该用什么控件
如题，比方说我下面有3段内容，然后增加一个checkbox的选框，勾选上下面的选框，内容就显示三段，不选中内容就显示两段，这种大家有弄过吗

作者: kinoko 时间: 2024-9-30 12:12
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 时间: 2024-9-30 12:45

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

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

作者: Himem 时间: 2024-9-30 12:53
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" 等，这些插件可以帮助你更轻松地管理内容的显示和隐藏，而无需编写代码。

通过以上方法，你可以根据复选框的状态来控制内容的显示和隐藏。希望这对你有帮助

欢迎光临 amobbs.com 阿莫电子技术论坛 (https://www.amobbs.com/)