如何使jQuery单击事件仅影响嵌套在同一父元素中的元素

I'm a jQuery newbie as of this morning, and this is the code I've come up with to show a div that accompanies the anchor that calls it, inside a div with the class 'foo'. It doesn't work :P

我是今天早上的一个jQuery新手,这是我想出的代码,用于显示一个div,它伴随着调用它的锚点,在一个带有'foo'类的div中。它不起作用: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>

I'd like to be able to have multiple identical foo divs (apart from the nested div's actual content of course), and all I need to do is assign the containing div the 'foo' class in order to cause the containing anchor to show the containing div on click.

我希望能够有多个相同的foo div(当然除了嵌套div的实际内容之外),我需要做的就是将包含div的'foo'类赋给它以使得包含的锚显示出来单击时包含div。

Is this kind of thing even possible? Thanks in advance for responses.

这种事情甚至可能吗?在此先感谢您的回复。

2 个解决方案

#1

Try this

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

#2

Try this instead (assuming 'div.faq' is supposed to be 'div.foo', based on the HTML):

试试这个(假设'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");
    }
});