默認情況下，按鈕隱藏然后顯示
[英]button by default hide then show
問題描述
它顯示復選框，但是默認情況下我希望它隱藏，但是單擊顯示后
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#ElectronicsChk").toggle(1000);
$("#SoftwareChk").toggle(1000);
$("#Dontknow").toggle(1000);
$("p").toggle(1000);
});
});
</script>
<style>
div.electro{
background-color: red;
}
</style>
</head>
<body>
<button id="btn1">Electronics</button>
<button id="btn2">Homeapplainces</button>
<button id="btn3">Downloadable</button>
<div class="electro">
<input type="checkbox" id="ElectronicsChk">
<p>Hardware Problems</p></input>
<input type="checkbox" id="SoftwareChk">
<p>Software Problems</p></input>
<input type="checkbox" id="Dontknow">
<p>I dont Know</p></input>
</div>
</body>
</html>
請幫助我是一個新手，所以請在提交您的代碼后進行解釋，...對不起，我將非常感謝您的幫助...等待您的早日答復...
1 個解決方案
解決方案1
0 已采納 2017-05-29 18:15:11
要最初隱藏復選框和p，您可以簡單地使用CSS：
div.electro > * {
display:none;
}
也就是說，似乎可以通過隱藏和顯示div容器而不是每個子元素來簡化代碼：
CSS：
div.electro {
display:none;
}
JavaScript的：
$(document).ready(function(){
$("#btn1").click(function(){
$(".electro").toggle(1000);
});
});
這樣會更好，因為它遵循DRY原理並且更加靈活，例如，如果您向容器中添加了一些新元素（如一些幫助文本），則無需更新JavaScript邏輯。
jQuery默認隱藏按鈕
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.