JQuery дочерние элементы

267

10 мая 2017, 09:03

Всем привет, есть такой список, мне нужно чтобы при нажатии на определенный элемент, он открывал дочерний подпункт а не все сразу.

	$(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>

Answer 1

Замени

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

на

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

или на

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

без разницы

Ведь ты сам говоришь, что при клике на пункт, открывались все дочерние.. А при this ты уже указываешь к чему этот подпункт относится, к какому контексту

$(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>