使用不在同一个 div 中的按钮隐藏/显示 div

Posted 2023-05-08

【中文标题】使用不在同一个 div 中的按钮隐藏/显示 div

【英文标题】：hide / show div with a button not in the same div

【发布时间】：2021-12-08 11:28:56

【问题描述】：

我正在为我的 wordpress 网站使用 elementor，我希望在第一个 div（部分）中有一个按钮，用于控制是否显示第二个单独的 div（部分）。我尝试使用复选框 hack，但只有当复选框作为内容位于 div 中时它才有效https://css-tricks.com/the-checkbox-hack/

有没有使用 CSS 甚至 javascript 的解决方案？如果您建议我使用 javascript，我将放入我的 function.php 文件中，因为我是 javascript 的初学者，请您将我必须实现的所有功能写入我的 function.php 文件中。

基本意思是：

<div>button</div> <div>content to show and hide on click on the button</div>

最好的问候， 克莱门特

【问题讨论】：

您需要自己尝试一些东西，如果遇到困难，请回到这里寻求支持。

嗨！您应该避免专门询问所有代码。无论如何，你可能会收到它，但看起来你不是来这里学习的，而是让别人完成你的工作。其次，首先搜索谷歌（字面意思是搜索onclick hide 的第一个结果是w3schools.com/howto/howto_js_toggle_hide_show.asp）:)

您好，很抱歉，如果我看起来需要提供服务而不是支持。相信我，我在这里问之前挖过。而且您的链接没有出现在我的搜索中，但似乎可以完成这项工作！关于询问整个代码，我询问它是为了了解它是如何工作的，因为我不知道如何启动它。无论如何，我会牢记你的建议，以备不时之需。最好的问候

【参考方案1】：

你可以使用 Jquery：

1-给你的DIV添加一个ID

<div id = "btn_show"> button </div> <div id = "show"> content to show and hide on click on the button </div>

2-调用jquery显示

$("#btn_show").click(function()
 $("#show").show();
  //or
 $("#show").hide();
);

而 jquery 你可以用 CDN 调用它

<script src="https://code.jquery.com/jquery-3.6.0.js"</script>

【参考方案2】：

在没有任何库的 javascript 中，这可能非常简单，但您需要在您的 div 和您的按钮上放置一个 id。

<div id="myButton">button</div> 
<div id="myDiv">
  content to show and hide on click on the button
</div>

然后你只需添加一个像这样的脚本部分：（它只需要在你的 div 和 DOM 中的按钮之后）

<script>
var myDiv = document.getElementById('myDiv');
var myButton = document.getElementById('myButton');
myButton.addEventListener('click', e => 
  myDiv.classList.toggle('visible'):
);
</script>

最后，你需要一个这样的 CSS：

.visible 
  display: none;

【讨论】：

为什么不至少对按钮使用onclick？虽然 css togle 类可能是一个不错的想法，但您至少应该使用 onclick 而不是 id 和 addEventListener。

是的，但我从不使用 onclick。所以我真的不知道它是如何真正工作的。为了确保我给他的代码有效，我没有使用它^^。但我会看看谢谢。

【参考方案3】：

感谢您的所有回答！这是我使用的：

<button onclick="myFunctionopenclose()">Click Me</button>
<div id="myDiv" style="display:none;">content to hide and show</div>
<script> function myFunctionopenclose() 
var x = document.getElementById("myDiv");
if (x.style.display === "block") 
    x.style.display = "none";  
else 
x.style.display = "block"; 

最好的问候， 克莱门特