Question

我正在尝试使用一些事实框创建一个页面，所以我使用两个

标记文本块创建了这些div，第二个块上有'display none'，应该首先单击div时显示。

这就是我的问题我想制作一个Jquery函数，当我点击div时加载第二段我只是不知道如何告诉网站它具体是'段落而不使用任何id或类这将触发所有其他div。

这是我的代码：

 <div id="content">
       <div class="teaser-box">
             <p>TEXT TEXT TEXT TEXT</p><!-- paragraph 1 (shown) -->
             <p>TEXT TEXT TEXT TEXT</p><!-- paragraph 2 (not shown) -->
       </div>

       <div class="teaser-box">
             <p>TEXT TEXT TEXT TEXT</p><!-- paragraph 1 (shown) -->
             <p>TEXT TEXT TEXT TEXT</p><!-- paragraph 2 (not shown) -->
       </div>

       <div class="teaser-box">
             <p>TEXT TEXT TEXT TEXT</p><!-- paragraph 1 (shown) -->
             <p>TEXT TEXT TEXT TEXT</p><!-- paragraph 2 (not shown) -->
       </div>

       <div id="load-teas"><h4>Load more</h4></div>


  </div><!-- content END -->

<小时/> 谢谢！

Answer 1

您可以在函数中使用Jquery Selector之类的其他:nth-child，如下所示：

$(document).ready(function () {
   $('.teaser-box').click(function () {
      $('p:nth-child(2)',this).show();
   })
})

演示 http://jsfiddle.net/KC63V/4/

Answer 2

每当点击div时，您都会引用this

中的div

现在您只需找到此div的last child和show

类似的东西：

 $('.teaser-box').click(function() { 

$(this).children(':last').show();
        return false; 
    });

Answer 3

单击每个框并单击该框的第二个p子项（eq(1)）

$(".teaser-box").click(function(){
   $(this).find("p").eq(1).show();
}

在特定div中加载第二个内容onclick

3 个答案: