jQuery 切换复制停止工作

jQuery Toggle Duplication Stops Working

本文关键字：停止工作 复制 jQuery      更新时间：2023-09-26

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

$('#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，显然可以绕过 - 但是更好的方法是什么？非常感谢。

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

你只得到第一个元素，因为你使用的是 ID 选择器。 和 id 是唯一的。您需要使用类"内容"：

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

并转换您的代码： 

$('.toggle').toggle( ...
相关文章：