Как сделать, чтобы событие нажатия jQuery воздействовало только на элемент, вложенный в тот же родительский элемент

Question

Я новичок в jQuery с сегодняшнего утра, и вот код, который я придумал, чтобы показать div, который сопровождает якорь, который его вызывает, внутри div с классом 'foo'. Это не работает: P

$('div.foo').children('a').click(function(event){
    event.preventDefault();
    if ($(this).closest('div').('div').is(':hidden')) {
        $(this).closest('div').('div').show("slow");
    } else {
        $(this).closest('div').('div').hide("slow");
    }
});

HTML:

<div class="foo">
    <a href="#" title="">Click me!</a>
    <div>And this will appear!</div>
</div>

Я хотел бы иметь возможность иметь несколько одинаковых тегов foo (кроме фактического содержимого вложенного div, конечно), и все, что мне нужно сделать, - это присвоить содержащему div классу 'foo', чтобы вызвать содержащий якорь, чтобы показать содержащий div при нажатии.

Это вообще возможно? Заранее спасибо за ответы.

Answer 1

Попробуйте это

$('div.foo a').click(function(event){
  event.preventDefault();
  $(this).next().toggle('slow');
});

Answer 2

Попробуйте вместо этого (если предположить, что div.faq должен быть div.foo на основе HTML):

$('div.foo').children('a').click(function(event){
    event.preventDefault();

    var parent = $(this).closest('div'),
    child = $('div', parent);

    if (child.is(':hidden')) {
      child.show("slow");
    } else {
      child.hide("slow");
    }
});