[英]Show hide section in WordPress Elementor on a button/text click
I am trying to create a jQuery that will allow me to show/hide sections by class on the website when I click on a selected button.我正在尝试创建一个 jQuery,当我单击选定的按钮时,它将允许我在网站上显示/隐藏 class 部分。
I have tried我试过了
created the text/button with css class websites and a section with a css class web, then:使用 css class 网站和一个带有 css class web 的部分创建文本/按钮,然后:
$("#websites").click(function(){ $(".web").hide(); })
But this is not working for me, any help would be appreciated.但这对我不起作用,我们将不胜感激。 Thanks谢谢
The new code新代码
> <button onclick="myfunction()">Hide/Show</button> <script> function
> myfunction() {
> var x = document.getElementById('myDIV');
> if (x.style.display === 'none') {
> x.style.display = 'block';
> } else {
> x.style.display = 'none';
> } } </script>
I need to have multiple values show/hidden.我需要显示/隐藏多个值。 I tried getbyclass and also querySelectorAll.我尝试了 getbyclass 和 querySelectorAll。 but this is still not working for me.但这对我仍然不起作用。 Please advise.请指教。
It would be much simpler to use jquery
for this - you can add a click
event to your button and then select the elements you want by a class
using $(".classname")
, before then call .toggle()
.为此使用jquery
会简单得多 - 您可以将click
事件添加到您的按钮,然后使用$(".classname")
class 添加您想要的元素class
,然后调用.toggle()
。
I've provided an example below, the code is fully commented, all the CSS
rules are simply to make it look nicer, they are not needed for functionality.我在下面提供了一个示例,代码已完全注释,所有CSS
规则只是为了让它看起来更好,功能不需要它们。
// Add click event to toggle button $("#toggleButton").click( function() { // Toggle elements with the class.toggleBox $(".toggleBox").toggle(); });
.box { height: 25px; width: 25px; margin: 5px; color: white; background: blue; text-align: center; line-height: 25px; }.toggleBox { background: green; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <p>Boxes in green have the class.toggleBox, those in blue do not. The button below has a click event attached to it and will toggle the boxes with the class.toggleBox to show/hide</p> <button id="toggleButton">Hide/Show</button> <div class="box toggleBox"> A </div> <div class="box toggleBox"> B </div> <div class="box"> C </div> <div class="box toggleBox"> D </div> <div class="box"> E </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.