Parent div 未使用 parent().show() 方法显示
Parent div is not showing using parent().show() method
我的代码中有一个 div 的树结构。当点击 Yes 时,子 div 出现,当我们点击 child 时,Grand child div 出现..如果我们单击“否”,那么所有子项都将被隐藏。这在我的编码中工作正常,但是当我再次尝试单击“是”时隐藏所有子项之后。单击“是”的功能在隐藏 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。
而当你点击否隐藏时,你隐藏所有children,应该调用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>
我的代码中有一个 div 的树结构。当点击 Yes 时,子 div 出现,当我们点击 child 时,Grand child div 出现..如果我们单击“否”,那么所有子项都将被隐藏。这在我的编码中工作正常,但是当我再次尝试单击“是”时隐藏所有子项之后。单击“是”的功能在隐藏 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。
而当你点击否隐藏时,你隐藏所有children,应该调用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>