父 div 未使用 parent().show() 方法显示
[英]Parent div is not showing using parent().show() method
问题描述
I have a tree structure of div in my coding.. When click on Yes, child div appears and when we click on child, Grand child div appears.. and if we click on No then all children will get hide.. this is works fine in my coding but after hiding all children when m again trying to click on yes.. click function for Yes not working after hiding div using children().hide() method.
我的编码中有一个 div 的树形结构。当单击“是”时，会出现子 div，当我们单击“子”时，会出现“大子 div”。在我的编码中很好，但是当 m 再次尝试单击是时隐藏所有子项后。单击 function 表示是在使用 children().hide() 方法隐藏 div 后不起作用。 why this is happening?为什么会这样？ HTML code 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 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();
});
});
1 个解决方案
解决方案1
1 已采纳 2020-04-24 07:19:31
Not clear your requirement, but in your sample code, you set wrong id when selector.不清楚您的要求，但在您的示例代码中，您在选择器时设置了错误的 id。
And when you click No to hide, you hide all children, should call show() to click Yes $("div#children").children().show()当你点击否隐藏时，你隐藏所有孩子，应该调用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.