1

我想使用 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，并且会有类似的弹出窗口。

我应该怎么做才能实现这一目标？

任何帮助将不胜感激。

感谢你在期待。

问候 Parvez A.

4

1 回答 1

0

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/

于 2014-04-21T10:02:35.840 回答