Показать скрытый элемент внутри другого элемента при нажатии

Question

Продолжение: Как получить детей из селектора $(this)?

У меня как-то не работает.

http://jsfiddle.net/teKwN/1/

HTML

  <h4>
    Sometext
    <h3>
      Another text
    </h3>
  </h4>

CSS

h3 {
    display: none;
}

JS

$('h4').live('click', function() {
    $(this).children('h3').toggle('slide');
});

РЕДАКТИРОВАТЬ: Есть несколько элементов, таких как h4. http://jsfiddle.net/teKwN/4/

Пожалуйста помоги. Благодарю.

Answer 1

Ваш HTML-код недействителен, поэтому браузер пытается выяснить, что вы имели в виду. Если вы проверите элемент в Chrome, вы увидите это:

<h4>
    Sometext
</h4>
<h3>
    Another text
</h3>

Из-за этого ваш h4 не имеет детей, поэтому $(this).children('h3') не возвращает элементов.

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

http://jsfiddle.net/teKwN/3/

Answer 2

Не уверен, в чем именно проблема, но вложенные заголовки, вероятно, не очень хорошая идея. Реорганизация вашего HTML с заголовками в виде братьев и сестер в элементе контейнера, кажется, исправляет это: http://jsfiddle.net/rjzaworski/sJe3g/

Answer 3

Проверьте это работает нормально

 $('h4').live('click', function() {
        $('h3').toggle('slow');
    });

Answer 4

Пытаться

$('h3').toggle('slide');

вместо

$(this).children('h3').toggle('slide');