Question

我目前正致力于解决Bootstrap 3可折叠插件的所有＆＃34; - 按钮问题。它似乎工作正常，但只有我的页面上只有一个可折叠的。当我添加另一个时，我的方法仍将只在第一个链接项中工作。

这是我的JS：

$(function () {
    $("#toggle-all").click(function (e) {
        e.preventDefault();

        var $hidden = $(this).parent().data("hidden");

        if ($hidden == "false") {
            $(this).parent().find(".collapse.in").each(function () {
                $(this).collapse("hide");
            });
            $(this).parent().data("hidden", "true");
        } else {
            $(this).parent().find(".collapse").not(".in").each(function () {
                $(this).collapse("show");
            });
            $(this).parent().data("hidden", "false");
        }

        $(this).find("i").toggleClass("fa-plus fa-minus");
    });
});

这里有一个小提琴： http://jsfiddle.net/rMdLZ/

为什么它没有按预期工作的任何想法？

谢谢，儒略

Answer 1

不要使用ids。使用课程，我认为你应该做得很好。

为什么？

因为ID必须在整个框架中是唯一的。

$('#someId')将始终返回相同的元素，但$('.someClass')会返回someClass类

的所有元素

我已将$("#toggle-all").click更改为$(".toggle-all").click并将toggle-all类添加到了全部折叠按钮。它工作正常。

Demo

Answer 2

您正在使用2个ID。 ID必须是每个文档上的唯一元素。

请参阅此SE问题以供参考：Two HTML elements with same id attribute: How bad is it really?

将其更改为Classes：

$(function () {
  $(".toggle-all").click(function (e) {
    e.preventDefault();

    var $hidden = $(this).parent().data("hidden");

    if ($hidden == "false") {
        $(this).parent().find(".collapse.in").each(function () {
            $(this).collapse("hide");
        });
        $(this).parent().data("hidden", "true");
    } else {
        $(this).parent().find(".collapse").not(".in").each(function () {
            $(this).collapse("show");
        });
        $(this).parent().data("hidden", "false");
    }

    $(this).find("i").toggleClass("fa-plus fa-minus");
  });
});

http://jsfiddle.net/vP4e9/1/

每个链接的JQuery单击功能都不起作用

2 个答案:

为什么？