jquery - JQuery 显示/隐藏具有相同名称的多个按钮的切换

Question

我是 JQuery 的新手，正在慢慢摸索，但我真的很难过:(

我有一个包含多个“更多信息”按钮的页面，当点击切换信息时（每个按钮都不同）

但是，当我点击说第二个“更多信息”按钮时，它只会多次切换第一个按钮（“更多信息”按钮的数量。

我尝试了各种建议的解决方案，但似乎无法使其正常工作:)

这是我目前的代码：

http://pastebin.com/SSxc09Gy

任何帮助都会令人惊叹并感激不尽！

提前致谢 ：）

Answer 1

这是您的 pastebin 示例的一些清理版本。

清理后的版本删除了样式和 javascript 以及表格内的 html/head 标记的重复减速。您是否从其他来源加载此数据？这就是 html/head/body 部分存在的原因吗？

看起来在您的第二组标记中，您需要将按钮的 href 属性更新为 #collapse2 ，并将包含其他信息的 div 的 id 更新为。您使用的 javascript 会查找该 href 属性以确定要扩展的 div。

最终应该是这样的：

<section class="round-border">
    <div>
        <button href="#collapse2" class="nav-toggle">More Information</button>
    </div>
    <div id="collapse2" style="display:none">
        <div id="justify" style="width:574px;text-align:left">
            <p>Second lot of information</p>
        </div>
    </div>
</section>

您还可以更改您的标记和 javascript，而无需您绑定到唯一的折叠 ID。

如果您这样更改标记，通过将 div id“collapse1”设置为“collapse”类，您可以让 javascript 沿着 dom 查找包含按钮的元素和要使用 jQuery 的.closest切换的 div ()方法，然后使用.find()找到可折叠的 div 元素。这也很好地展示了 jQuery 的方法链是多么的棒。

新标记

<td colspan="4" style="text-align:right;">
    <section class="round-border">
        <div>
            <button class="nav-toggle">More Information</button>
        </div>
        <div class="collapse hide">
            <div id="justify" style="width:574px;text-align:left">
                <p>Second lot of information</p>
            </div>
        </div>
    </section>
</td>

新js

$(document).ready(function () {
    $('.nav-toggle').click(function () {
        $(this).closest('.round-border').find('.collapse').slideToggle();

        var text = $(this).text();
        $(this).text(text == "More Information" ? "Hide" : "More Information");
    });
});

带有替代解决方案的jsfiddle

请注意，此方法的计算量更大，因为 jQuery 对 dom 进行了更多搜索，但它使维护内容更容易一些，因为您不必担心跟踪折叠 id 编号。如果您只在少数几个没有很多元素的地方执行此操作，那么额外计算的负面影响不应该是显而易见的。