使用 jQuery 切换博客文章循环摘录

发布于 2024-08-03 16:47:15 字数 606 浏览 8 评论 0原文

我只想在我的博客帖子循环中显示帖子标题，当单击标题时，摘录将出现在下面。

到目前为止，我得到了这个：

$("#postTitle").click(function () {
$("#postExcerpt").toggle();

这只适用于第一个结果。

然而，这

$("#postTitle").click(function () {
$("#postExcerpt").next().toggle();

根本不起作用，我不明白为什么。

我的循环如下所示：

<div class="box">
    <div class="block">
    <p id="postTitle"><a href="#">Post Title</a></p>
    <p id="postExcerpt" style="display:none;">Post Excerpt</p>
     </div>
</div>

感谢您的帮助！

原文

I'd like to reveal only post titles on my blog posts loop, and when the title is clicked -- the excerpt will appear below.

So far I got this:

$("#postTitle").click(function () {
$("#postExcerpt").toggle();

Which works one the first result only.

This, however:

$("#postTitle").click(function () {
$("#postExcerpt").next().toggle();

Doesn't work at all, and I can't figure out why.

My loop looks like this:

<div class="box">
    <div class="block">
    <p id="postTitle"><a href="#">Post Title</a></p>
    <p id="postExcerpt" style="display:none;">Post Excerpt</p>
     </div>
</div>

Your help is appreciated!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

夏末染殇 2024-08-10 16:47:15

<script type="text/javascript">
$(document).ready(function(){
    $('#postTitle a').click(function(event){
        event.preventDefault();
        $(this).parent('#postTitle').siblings('#postExcerpt').toggle();
    });
});
</script>

此处演示：http://jquery.nodnod.net/cases/702/run

当然，您永远不应该重复使用 HTML ID。你应该使用类。

<script type="text/javascript">
$(document).ready(function(){
    $('#postTitle a').click(function(event){
        event.preventDefault();
        $(this).parent('#postTitle').siblings('#postExcerpt').toggle();
    });
});
</script>

Demo here: http://jquery.nodnod.net/cases/702/run

Of course, you should never reuse HTML IDs. You should use classes.

回复收藏 0 原文

~没有更多了~