javascript - jQuery Toggle 复制停止工作

Question

只需设置 jQuery Toggle。这是下面的功能。它工作正常。基本上，当您单击“显示更多”时，它会显示更多内容，并且“显示更多”一词会变为“显示更少”。

$('#toggle').toggle(
        function() {
            $('#content').slideDown();
            $(this).html('Show less →');
        }, 
        function() { 
            $('#content').slideUp(); 
            $(this).html('Show more →');
        }
    );

这很好，我的问题是页面上有多个。出于某种原因，当我多次复制和粘贴相同的 HTML 以创建多个切换内容时，其他的不起作用，只有第一个起作用。这是HTML：

<div id="team-page">

    Intro paragraph

    <a id="toggle" href="#">Show more &rarr;</a>

    <div id="content">
    Content shown when toggled
    </div>
</div>

所以当我多次复制这个时，其余的都不起作用。通过添加 #toggle1 #toggle2 并复制和修改 jQuery 显然可以解决问题 - 但更好的方法是什么？非常感谢。

Answer 1

$('#toggle').toggle( ...

您只得到第一个元素，因为您使用的是ID选择器。并且 id 是唯一的。您需要使用CLASS 'content' ：

<div class="content">
</div>

并转换您的代码：

$('.toggle').toggle( ...