[英]If parent div has no children showing then show a certain different child div
[英]Parent div is not showing using parent().show() method
我的編碼中有一個 div 的樹形結構。當單擊“是”時,會出現子 div,當我們單擊“子”時,會出現“大子 div”。在我的編碼中很好,但是當 m 再次嘗試單擊是時隱藏所有子項后。單擊 function 表示是在使用 children().hide() 方法隱藏 div 后不起作用。 為什么會這樣? HTML代碼
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<form >
<div class="form-group" id="main">
<label class="lbl" for="parent" id="parent" > Click on Yes to see child . and click on No to hide all children. </label>
<div class="form-inline">
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="parent" value="Yes" id="parent-yes"> Yes </label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="parent" value="No" id="parent-no"> No </label>
</div>
</div>
</div>
<div id="children" style="display:none;">
<div id="child1">
I am Child. Click on me to see Grand Child
<div id="child2" style="display:none;">
Grand Child
</div>
</div>
</div>
</div>
</form>
</body>
</html>
Javascript
$(document).ready(function () {
$("#parent-yes").on("click", function () {
$("div#children").show();
});
$("#child1").on("click", function () {
$("div#child2").show();
});
$("#parent-no").on("click", function () {
$("div#children").children().hide();
});
});
不清楚您的要求,但在您的示例代碼中,您在選擇器時設置了錯誤的 id。
當你點擊否隱藏時,你隱藏所有孩子,應該調用show()
點擊是$("div#children").children().show()
$(document).ready(function(){ $("#parent-yes").on("click", function(){ $("div#children").css("display", "block"); $("div#children").children().show() }); $("#child1").on("click", function(){ $("div#child2").css("display", "block"); }); $("#parent-no").on("click", function(){ $("div#children").children().hide() }); });
<,DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width: initial-scale=1"> <link rel="stylesheet" href="https.//maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min:css"> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min:js"></script> <script src="https.//cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min:js"></script> <script src="https.//maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> </head> <body> <form > <div class="form-group" id="main"> <label class="lbl" for="parent" id="parent" > Click on Yes to see child. and click on No to hide all children; </label> <div class="form-inline"> <div class="form-check"> <label class="form-check-label"> <input type="radio" class="form-check-input" name="parent" value="Yes" id="parent-yes"> Yes </label> </div> <div class="form-check">  : <label class="form-check-label"> <input type="radio" class="form-check-input" name="parent" value="No" id="parent-no"> No </label> </div> </div> </div> <div id="children" style="display;none."> <div id="child1"> I am Child: Click on me to see Grand Child <div id="child2" style="display;none;"> Grand Child </div> </div> </div> </div> </form> </body> </html>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.