Question

在我的博客中，有些文章很长。所以我希望在加载页面时折叠长篇文章。它适用于我只有一篇文章，但如果我有更多的文章似乎有些东西被打破。

我是这样做的：

$('div#ttoggle').hide();
$('#btoggle').click( function() {
    if($('div#btoggle p').text() == 'expand article'){
        $('div#btoggle p').text('collapse article');
    }else{
        $('div#btoggle p').text('expand article');              
    }   

    $('div#ttoggle').slideToggle("slow");           
});

有什么想法吗？

Answer 1

您似乎正在使用id选择器，因为您声明的内容会在页面上多次出现。 id属性必须是唯一的，因此这将是无效的HTML并且可能导致此失败。

此处的解决方案是将所有id替换为class es。您可以使用.classname选择器选择适当的元素

Answer 2

您正在使用ID“#btoggle”，您可能需要课程。您应该只拥有一个具有给定ID的元素。

您正在为多个元素分配一个单击处理程序，然后通过重新检查所有元素来决定要执行的操作。而是在处理程序中使用this来仅考虑单击的元素：

$('div#ttoggle').hide();
$('#btoggle').click( function() {
    var tog = $(this);
    var togp = tog.find("p");    
    if (togp.text() == 'expand article') {
        togp.text('collapse article');
    }
    else {
        togp.text('expand article');              
    }   

    tog.siblings('div#ttoggle').slideToggle("slow");
});

（我不知道你的HTML实际上是什么样的，我猜了一下兄弟姐妹。）

使用jQuery切换博客文章（展开/折叠）

2 个答案: