Question

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

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

这很好，我的问题是在页面上有多个。出于某种原因，当我多次复制并粘贴相同的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 '内容'：

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

并转换代码：

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

jQuery切换重复停止工作

1 个答案: