javascript - 父 div 未使用 parent().show() 方法显示
问题描述
我的编码中有一个 div 的树形结构。当单击 Yes 时,会出现子 div,当我们单击 child 时,会出现 Grand child div 。在我的编码中很好,但是当 m 再次尝试单击 yes 时隐藏所有子项后。使用 children().hide() 方法隐藏 div 后单击 Yes 函数不起作用。为什么会这样? 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>
推荐阅读
- powerbi - Tackometer 可以在 Power BI 中向下钻取或钻取吗?
- html - 单击按钮时如何运行html代码
- javascript - 如何将类添加到被调用的组件?
- python - 简单的python游戏,玩家可以踢球,但是如果玩家改变了他们的大小,球就不能再被触摸了
- c++ - Boost Async Server 基于会话对象处理多个客户端
- python - 绝对初学者需要帮助,不支持的操作数类型
- javascript - Vue 更新状态
- c++ - 如何让 Visual Studio Code 包含带尖括号 <> 的非标准库?
- javascript - 图表,如何使用日期作为 xAxis 添加数据
- r - ggplotly 不会重现大小图例