我正在為我的 wordpress 網站使用 elementor,我希望在第一個 div(部分)中有一個按鈕,用于控制是否顯示第二個單獨的 div(部分)。我嘗試使用復選框黑客,但僅當復選框作為內容位于 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>
最好的問候,克萊門特
uj5u.com熱心網友回復:
您可以使用 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>
uj5u.com熱心網友回復:
在沒有任何庫的 javascript 中,這可能非常簡單,但您需要在按鈕上放置一個 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;
}
轉載請註明出處,本文鏈接:https://www.uj5u.com/qianduan/330117.html
標籤:javascript 查询 css WordPress的
上一篇:鍵碼/按鈕組上、下、左、右移動
下一篇:顯示/隱藏內容串列中的文本
