jquery - 需要在一系列元素中切换一个div

Question

我在页面上有一系列 DIV，每个 DIV 都包含一个嵌套 DIV，当用户单击 UL 中包含的链接时，我需要能够打开和关闭该 DIV。这是一些示例代码:

我需要能够添加<li> </li>到我页面上某个 div 内的每个 UL。这是我的代码:

<div class="gallery" style="width: 67px;">
    <ul>
        <li class="info"><a href="#">Get Info</a></li> 
    </ul>
    <div class="infoPanel">  This is the panel that I need to toggle on and off</div>
</div>
<div class="gallery" style="width: 67px;">
    <ul>
        <li class="info"><a href="#">Get Info</a></li> 
    </ul>
    <div class="infoPanel">  This is the panel that I need to toggle on and off</div>
</div>
<div class="gallery" style="width: 67px;">
    <ul>
        <li class="info"><a href="#">Get Info</a></li> 
    </ul>
    <div class="infoPanel">  This is the panel that I need to toggle on and off</div>
</div>​

因此，对于每个 div.gallery，当用户单击 li.info 中的链接时，我需要打开 .infoPanel。我已经能够使一个工作正常，但无法弄清楚如何将 jquery 限制到 div 的每个实例。任何帮助启动此操作的帮助都会很棒。

Answer 1

我想这就是你的意思。

尝试一下: http://jsfiddle.net/tjd26/

$('div.gallery li.info a').click(function() {
    $(this).closest('.gallery').find('.infoPanel').slideToggle();
    return false;
});​

这样你就可以得到 .gallery <a>的祖先单击该按钮，然后从那里您可以找到 .infoPanel包含在里面。

• http://api.jquery.com/closest/
• http://api.jquery.com/find/
• http://api.jquery.com/slideToggle/