Родительский div не отображается с использованием метода parent (). Show () - PullRequest
Новая
       42

Родительский div не отображается с использованием метода parent (). Show ()

0 голосов
/ 24 апреля 2020

У меня есть древовидная структура div в моей кодировке. При нажатии на Yes появляется дочерний div, а когда мы нажимаем на child, появляется Grand child div ... и если мы нажимаем на No, тогда все дочерние элементы скрываются .. это нормально работает в моем коде, но после того, как m снова пытается скрыть все дочерние элементы, когда m снова пытается щелкнуть по кнопке yes .. click, функция Yes не работает после скрытия div с использованием метода children (). 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>

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 голос
/ 24 апреля 2020

Не ясно ваше требование, но в вашем примере кода вы устанавливаете неправильный идентификатор при селекторе.

И когда вы нажимаете Нет, чтобы скрыть, вы прячете всех дочерних элементов, должны вызвать 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">
&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>
...