使用 jQuery 的多个弹出窗口答案

【问题标题】：Multiple flyouts using jQuery使用 jQuery 的多个弹出窗口
【发布时间】：2014-06-05 08:42:45
【问题描述】：

我想使用 jQuery 在单个 HTML 页面中创建多个弹出窗口。请看下面的代码。

<div>123
    <p style="display:none">
        <a href="#">1</a>
        <a href="#">2</a>
        <a href="#">3</a>
    </p>
</div>
<div>ABC
    <p style="display:none">
        <a href="#">a</a>
        <a href="#">b</a>
        <a href="#">c</a>
    </p>
</div>

目前，只有两个 div 具有不同的内容。我希望，当单击 div 时， p 标签（嵌套在其中）显示/隐藏。

我的 jquery 知识非常有限，为了实现它，我的 jquery 代码是这样的。

<script>
$(document).ready(function(){
  $("div").click(function(){
    $(this p).toggle();
  });
}); 
</script>

这当然行不通。此外，同一页面上可能有两个以上的 div，并且会有类似的弹出窗口。

我应该怎么做才能做到这一点？

任何帮助将不胜感激。

谢谢你的期待。

问候帕韦斯 A.

【问题讨论】：

标签： jquery flyout

【解决方案1】：

HTML 调整：

<div class="toggle_this">123
    <p style="display:none">
        <a href="#">1</a>
        <a href="#">2</a>
        <a href="#">3</a>
    </p>
</div>
<div class="toggle_this">ABC
    <p style="display:none">
        <a href="#">a</a>
        <a href="#">b</a>
        <a href="#">c</a>
    </p>
</div>

Javascript：

$(document).ready(function(){

    $(".toggle_this").click(function(){
        console.log('divs been hit');
    $(this).children().toggle();
  });

});

请参考链接中的工作代码：http://jsfiddle.net/UaCLn/5/

【讨论】：

谢谢。真的很有帮助。