Comment masquer un élément enfant en utilisant javascript

Question

J'ai fait du code javascript pour afficher l'élément principal si je clique sur l'élément principal sous tous les éléments enfants devraient venir mais dans mon code ne fonctionne pas.

$(function() {
  //alert("hello");
  $(".chlnode").parent().hide();
  $(".mainnode").click(function() {
    alert("mainnode is clicking");
    $(this).children('ul').show();
    $(this).siblings().find('ul').hide();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

<ul>
  <li class='mainnode'>A</li>
  <ul>
    <li class='chlnode'>A1</li>
    <ul>
      <li class='chlnode'>A3</li>
    </ul>
    <ul></ul>
    <li class='chlnode'>A2</li>
    <ul>
      <li class='chlnode'>A4</li>
    </ul>
    <ul>
      <ul>
        <li class='chlnode'>A5</li>
      </ul>
      <ul></ul>
    </ul>
  </ul>
  <li class='mainnode'>B</li>
  <ul>
    <li class='chlnode'>B1</li>
    <li class='chlnode'>B2</li>
    <ul>
      <li class='chlnode'>B3</li>
    </ul>
    <ul>
      <ul>
        <li class='chlnode'>B4</li>
      </ul>
      <ul></ul>
    </ul>
  </ul>
  <li class='mainnode'>C</li>
  <ul>
    <li class='chlnode'>C1</li>
    <ul>
      <li class='chlnode'>C2</li>
    </ul>
    <ul>
      <ul>
        <li class='chlnode'>C3</li>
      </ul>
      <ul>
        <ul>
          <li class='chlnode'>C4</li>
        </ul>
        <ul>
          <ul>
            <li class='chlnode'>C5</li>
          </ul>
        </ul>
      </ul>
    </ul>
  </ul>
  <li class='mainnode'>D</li>
  <ul>
    <li class='chlnode'>D1</li>
    <ul>
      <li class='chlnode'>D4</li>
    </ul>
    <ul></ul>
    <li class='chlnode'>D3</li>
    <ul>
      <li class='chlnode'>D5</li>
    </ul>
    <ul>
      <ul>
        <li class='chlnode'>D6</li>
      </ul>
      <ul>
        <ul>
          <li class='chlnode'>D7</li>
        </ul>
        <ul></ul>
      </ul>
    </ul>
  </ul>
  <li class='mainnode'>E</li>
  <ul>
    <li class='chlnode'>E1</li>
  </ul>
  <li class='mainnode'>F</li>
  <ul>
    <li class='chlnode'>F1</li>
  </ul>
  <li class='mainnode'>G</li>
  <ul>
    <li class='chlnode'>J</li>
    <ul>
      <li class='chlnode'>J1</li>
    </ul>
    <ul></ul>
  </ul>
</ul>

Answer 1

Essayez avec le code suivant.

$(function() {
  //alert("hello");
  $(".chlnode").parent().hide();
  $(".mainnode").click(function() {
    alert("mainnode is clicking");
    $(".mainnode ~ ul").hide();
    $(this).next('ul').show();
  });
});

J'ai tellement changé $(".mainnode ~ ul").hide(); va cacher tous les ul avant de montrer celui qui correspond au li cliqué.

Puisque votre li n'a pas d'enfants mais seulement des frères et sœurs, vous pouvez utiliser .next() o .siblings() comme ceci $(".mainnode ~ ul").hide();

Démo

$(function() {
  //alert("hello");
  $(".chlnode").parent().hide();
  $(".mainnode").click(function() {
    alert("mainnode is clicking");
    $(".mainnode ~ ul").hide();
    $(this).next('ul').show();
  });
});

This is my html code i am generating php file.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

<ul>
  <li class='mainnode'>A</li>
  <ul>
    <li class='chlnode'>A1</li>
    <ul>
      <li class='chlnode'>A3</li>
    </ul>
    <ul></ul>
    <li class='chlnode'>A2</li>
    <ul>
      <li class='chlnode'>A4</li>
    </ul>
    <ul>
      <ul>
        <li class='chlnode'>A5</li>
      </ul>
      <ul></ul>
    </ul>
  </ul>
  <li class='mainnode'>B</li>
  <ul>
    <li class='chlnode'>B1</li>
    <li class='chlnode'>B2</li>
    <ul>
      <li class='chlnode'>B3</li>
    </ul>
    <ul>
      <ul>
        <li class='chlnode'>B4</li>
      </ul>
      <ul></ul>
    </ul>
  </ul>
  <li class='mainnode'>C</li>
  <ul>
    <li class='chlnode'>C1</li>
    <ul>
      <li class='chlnode'>C2</li>
    </ul>
    <ul>
      <ul>
        <li class='chlnode'>C3</li>
      </ul>
      <ul>
        <ul>
          <li class='chlnode'>C4</li>
        </ul>
        <ul>
          <ul>
            <li class='chlnode'>C5</li>
          </ul>
        </ul>
      </ul>
    </ul>
  </ul>
  <li class='mainnode'>D</li>
  <ul>
    <li class='chlnode'>D1</li>
    <ul>
      <li class='chlnode'>D4</li>
    </ul>
    <ul></ul>
    <li class='chlnode'>D3</li>
    <ul>
      <li class='chlnode'>D5</li>
    </ul>
    <ul>
      <ul>
        <li class='chlnode'>D6</li>
      </ul>
      <ul>
        <ul>
          <li class='chlnode'>D7</li>
        </ul>
        <ul></ul>
      </ul>
    </ul>
  </ul>
  <li class='mainnode'>E</li>
  <ul>
    <li class='chlnode'>E1</li>
  </ul>
  <li class='mainnode'>F</li>
  <ul>
    <li class='chlnode'>F1</li>
  </ul>
  <li class='mainnode'>G</li>
  <ul>
    <li class='chlnode'>J</li>
    <ul>
      <li class='chlnode'>J1</li>
    </ul>
    <ul></ul>
  </ul>
</ul>

Answer 2

Vous devez réparer votre html puis essayez quelque chose comme ceci :

$(function() {
  $(".mainnode").click(function() {
    $(this).children('ul').show();
    $(this).siblings('li').find('ul').hide();
  });
});

li > ul {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

<ul>
  <li class='mainnode'>A
    <ul>
      <li class='chlnode'>A1</li>
    </ul>
  </li>

  <li class='mainnode'>B
    <ul>
      <li class='chlnode'>B1</li>
      <li class='chlnode'>B2</li>
    </ul>
  </li>
</ul>

Les enfants doivent toujours être à l'intérieur du parent :

<ul>
<li>
<ul><ul>
</li>
</ul>

Answer 3

Votre code html devrait être le suivant

<ul>
  <li class='mainnode'>A
      <ul>
        <li class='chlnode'>A1</li>
        <ul>
          <li class='chlnode'>A3</li>
        </ul>
        <ul></ul>
        <li class='chlnode'>A2</li>
        <ul>
          <li class='chlnode'>A4</li>
        </ul>
        <ul>
          <ul>
            <li class='chlnode'>A5</li>
          </ul>
          <ul></ul>
        </ul>
      </ul>
  </li>

  <li class='mainnode'>B
  <ul>
    <li class='chlnode'>B1</li>
    <li class='chlnode'>B2</li>
    <ul>
      <li class='chlnode'>B3</li>
    </ul>
    <ul>
      <ul>
        <li class='chlnode'>B4</li>
      </ul>
      <ul></ul>
    </ul>
  </ul>
  </li>

  <li class='mainnode'>C
  <ul>
    <li class='chlnode'>C1</li>
    <ul>
      <li class='chlnode'>C2</li>
    </ul>
    <ul>
      <ul>
        <li class='chlnode'>C3</li>
      </ul>
      <ul>
        <ul>
          <li class='chlnode'>C4</li>
        </ul>
        <ul>
          <ul>
            <li class='chlnode'>C5</li>
          </ul>
        </ul>
      </ul>
    </ul>
  </ul>
  </li>

  <li class='mainnode'>D
    <ul>
    <li class='chlnode'>D1</li>
    <ul>
      <li class='chlnode'>D4</li>
    </ul>
    <ul></ul>
    <li class='chlnode'>D3</li>
    <ul>
      <li class='chlnode'>D5</li>
    </ul>
    <ul>
      <ul>
        <li class='chlnode'>D6</li>
      </ul>
      <ul>
        <ul>
          <li class='chlnode'>D7</li>
        </ul>
        <ul></ul>
      </ul>
    </ul>
  </ul>
</li>

  <li class='mainnode'>E
    <ul>
    <li class='chlnode'>E1</li>
  </ul>
  </li>

  <li class='mainnode'>F
  <ul>
    <li class='chlnode'>F1</li>
  </ul>
  </li>

  <li class='mainnode'>G
    <ul>
    <li class='chlnode'>J
        <ul>
          <li class='chlnode'>J1</li>
        </ul>
    </li>

  </ul>
</li>

</ul>