Javascript 未使用Parent（）显示父div。show（）方法_Javascript_Html_Parent

Javascript 未使用Parent（）显示父div。show（）方法

javascript html

Javascript 未使用Parent（）显示父div。show（）方法,javascript,html,parent,Javascript,Html,Parent,我的编码中有一个div树结构。。单击Yes（是）时，将显示child div（子div），单击child（子div）时，将显示Grand child div。。如果我们点击“否”，那么所有的孩子都会被隐藏。。这在我的编码中效果很好，但在我再次尝试单击“是”时隐藏了所有子项。。使用children（）隐藏div后，单击函数“是”“不工作”。hide（）方法为什么会这样？ HTML代码 <!DOCTYPE html> <html lang="en"> <head>

我的编码中有一个div树结构。。单击Yes（是）时，将显示child div（子div），单击child（子div）时，将显示Grand child div。。如果我们点击“否”，那么所有的孩子都会被隐藏。。这在我的编码中效果很好，但在我再次尝试单击“是”时隐藏了所有子项。。使用children（）隐藏div后，单击函数“是”“不工作”。hide（）方法为什么会这样？ 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">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  <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>

不清楚您的需求，但在示例代码中，在选择时设置了错误的id

当您单击“否”隐藏时，您隐藏了所有子项，应调用

show（）

单击“是”（“div#children”）.children（）.show（）

$（文档）.ready（函数（）{
$（“#父项是”）。在（“单击”，函数（）上）{
$（“div#children”）.css（“显示”、“块”）；
$（“div#children”）.children（）.show（）
});
$（“#child1”）。在（“单击”，函数（）{
$（“div#child2”）.css（“显示”、“块”）；
});
$（“#父项编号”）。在（“单击”，函数（）{
$（“div#children”）.children（）.hide（）
});
});

引导示例
单击Yes（是）以查看子对象。然后单击“否”隐藏所有子项。
对
不
我是个孩子。点击我看孙子
孙子
Hi@hien Nguyen。。我更正了我的代码。。谢谢你的回答，但它仍然不能解决我的问题。。当m再次单击yes单选按钮时，它应该只显示第一个孩子，而不是孩子和孙子。。你能帮忙吗
$(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();
  });
});