單擊按鈕/文本時在 WordPress Elementor 中顯示隱藏部分

Question

我正在嘗試創建一個 jQuery，當我單擊選定的按鈕時，它將允許我在網站上顯示/隱藏 class 部分。

我試過了

使用 css class 網站和一個帶有 css class web 的部分創建文本/按鈕，然后：

 $("#websites").click(function(){ $(".web").hide(); })

但這對我不起作用，我們將不勝感激。 謝謝

新代碼

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

我需要顯示/隱藏多個值。 我嘗試了 getbyclass 和 querySelectorAll。 但這對我仍然不起作用。 請指教。

Answer 1

為此使用jquery會簡單得多 - 您可以將click事件添加到您的按鈕，然后使用$(".classname") class 添加您想要的元素class ，然后調用.toggle() 。

我在下面提供了一個示例，代碼已完全注釋，所有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>