изменение css первого дочернего элемента с классом

Question

Я пытаюсь написать код javascript, чтобы изменить свойство отображения css первого div после нажатия на элемент пользователя, который имеет класс toggle-placement. мой код создает страницу, используя цикл. петля генерирует этот кусок кода каждый раз, когда:

<h3 class="placementName" onclick="showPlacement()" title="<?php echo $placement->getId() ?>"> Placement: <?php echo $placement->getName() ?></h3> 
<div class="toggle-placement"> 

toggle-placement инициализированную display:none и я хочу, чтобы показать каждый DIV после нажатия <h3> над ним. Как я могу получить div сразу после заголовка и изменить его css? ТНХ

Answer 1

Если вы хотите использовать jQuery, @ haim770, обеспечивают лучший ответ:

$('h3.placementName').click(
    function() { 
     $(this).next('.toggle-placement').show(); 
    } 
) 

Но с помощью CSS я не думаю, что это возможно, вы должны использовать JQuery для. . что вы ищете

Может быть, это поможет вам

Answer 2

Вы можете проще всего сделать свои действия с JQuery:

$('.placementName').click(// when you click on a '.placementName' class element. 
    function() { 
     $(this).next('.toggle-placement').show(); // show() == display:block; 
}); 

У вас есть документация следующей() 's селектор здесь =>https://api.jquery.com/next/

Просто редактирования:

С jQuery:

$('.placementName'). 

более быстрый чем:

$('h3.placementName'). 

Если вы используете класс "placementName" только на элементе < h3>, вы можете просто использовать "$ ('placementName'). "Тест производительности =>http://jsperf.com/jquery-selector-test

Answer 3

Ну подмигнули проще, если вы сделаете следующее:.

в вашем CSS создать класс под названием шкура:

.hide{ 
    display:none; 
} 

Затем в JavaScript, выполните следующие действия:

$('.placementName').on('click', function() { 
    $(this).next('.toggle-placement').toggleClass('hide'); 
});