Hello everyone, there is such a list, I need that when I click on a particular item, it opens a child sub-item and not all at once.

$(function () { $('.podpunkt').hide(); $('.punkt').click(function () { $('.punkt > .podpunkt').show(); }); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li class="punkt">P1 <ul class="podpunkt">PP1 <li>TEXT1</li> <li>TEXT2</li> <li>TEXT3</li> <li>TEXT4</li> <li>TEXT5</li> </ul> </li> <li class="punkt">P2 <ul class="podpunkt">PP2 <li>TEXT1</li> <li>TEXT2</li> <li>TEXT3</li> <li>TEXT4</li> <li>TEXT5</li> </ul> </li> <li class="punkt">P3 <ul class="podpunkt">PP3 <li>TEXT1</li> <li>TEXT2</li> <li>TEXT3</li> <li>TEXT4</li> <li>TEXT5</li> </ul> </li> <li class="punkt">P4 <ul class="podpunkt">PP4 <li>TEXT1</li> <li>TEXT2</li> <li>TEXT3</li> <li>TEXT4</li> <li>TEXT5</li> </ul> </li> <li class="punkt">P5 <ul class="podpunkt">PP5 <li>TEXT1</li> <li>TEXT2</li> <li>TEXT3</li> <li>TEXT4</li> <li>TEXT5</li> </ul> </li> </ul>

  • Use (event.target || event.srcElement).firstChild to get the child list - but this is on pure JS - wcobalt

1 answer 1

Replace

 $('.punkt > .podpunkt').show();

on

 $(this).find('.podpunkt').show();

or at

 $('.podpunkt', this).show();

no difference

After all, you yourself say that when clicking on an item, all the subsidiaries were opened .. And with this you already point out to what this sub-item belongs, to what context

 $(function () { $('.punkt').click(function () { // $('.punkt').on('click', function () { $('.podpunkt').hide(); $(this).find('.podpunkt').show(); // $('.podpunkt', this).show(); }); }); 
 .podpunkt { display: none; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li class="punkt">P1 <ul class="podpunkt">PP1 <li>TEXT1</li> <li>TEXT2</li> <li>TEXT3</li> <li>TEXT4</li> <li>TEXT5</li> </ul> </li> <li class="punkt">P2 <ul class="podpunkt">PP2 <li>TEXT1</li> <li>TEXT2</li> <li>TEXT3</li> <li>TEXT4</li> <li>TEXT5</li> </ul> </li> <li class="punkt">P3 <ul class="podpunkt">PP3 <li>TEXT1</li> <li>TEXT2</li> <li>TEXT3</li> <li>TEXT4</li> <li>TEXT5</li> </ul> </li> <li class="punkt">P4 <ul class="podpunkt">PP4 <li>TEXT1</li> <li>TEXT2</li> <li>TEXT3</li> <li>TEXT4</li> <li>TEXT5</li> </ul> </li> <li class="punkt">P5 <ul class="podpunkt">PP5 <li>TEXT1</li> <li>TEXT2</li> <li>TEXT3</li> <li>TEXT4</li> <li>TEXT5</li> </ul> </li> </ul>