jquery - 为什么我的 jquery 内容 slider 不工作？

Question

我有一个包含一些新闻的部分，当我点击我的 <h3><a href="#">show more news(+)</h3> 时我想要它，我想显示其他文章列表，例如本节中的新闻 slider 。 我是 jQuery 的初学者，我在阅读文档时发现了切换功能，我认为这可能符合我的目的。

我在上面尝试过这种方法，但是什么也没有发生，你能帮帮我吗？

 <section id="posts-container">
               <div id="posts-body">
                   <div id="posts-content">
                   <h1>Posts</h1>
                   <hr class="line_break">


                   <article id="loop-posts">
                       <img src="image1.png" />
                       <a href="#">Title 1</a>
                       <p>Lorem Ipsum is simply dummy</p> 
                       <h3>Read more (+)</h3>
                   </article>


                   <article id="loop-posts">
                       <img src="image2.png" />
                       <a href="#">Title 2</a>
                       <p>Lorem Ipsum is simply dummy text Lorem</p>
                       <h3>Read more (+)</h3>
                   </article>


                   <article id="loop-posts" class="toggle">
                       <img src="image2.png" />
                       <a href="#">Title 2</a>
                       <p>Lorem Ipsum is simply dummy text Lorem Ipsum</p>
                       <h3>Read more (+)</h3>
                   </article>

                      <article id="loop-posts" class="toggle">
                       <img src="image2.png" />
                       <a href="#">Title 2</a>
                       <p>Lorem Ipsum is simply dummy text Lorem </p>
                       <h3>Read more (+)</h3>
                   </article>

                   </div>

                 <h3>
                    <a href="#">show more news (+)</a>
                 </h3>
              </section>

我的 jQuery:

$('.toggle').click(function () {
    $('#posts-container,#posts-container .toggle').slideToggle();
});;

CSS:

#posts-container .toggle{display:none;}

Answer 1

您正在将点击事件处理程序添加到隐藏的文章容器中 - 因此该事件永远不会触发。您可能想要做的是将每篇文章中的隐藏内容嵌入到单独的文章容器中，然后您的点击事件处理程序可以执行类似以下的操作，以仅切换这篇文章的详细信息:

$(this).find ('.toggle').slideToggle();

我还注意到您的 html 格式不正确 - 缺少结束 div 标记，并且您重新使用了 ID 值。

你可以在这个 fiddle 上看到一个修改过的版本: http://jsfiddle.net/HNvrK/1/