Question

我有一个部分有一些新闻，我希望当我点击我的<h3><a href="#">show more news(+)</h3>时，我想要显示其他文章列表，就像我在本节中的新闻滑块一样。我是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 for this：

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

Answer 1

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

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

我还注意到你的html格式错误 - 缺少一个结束div标签，你重新使用了ID值。

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

为什么不使用我的jquery内容滑块？

1 个答案: