Question

我在页面上有多个手风琴，用户可以点击glyphicon-chevron-up或glyphicon-chevron-down来单独展开或折叠它们。为此，这段代码对我有用：

$('[data-toggle="collapse"]').click(function () {
    $(this).children(".glyphicon").toggleClass("glyphicon-chevron-up glyphicon-chevron-down");
});

我在页面上还有两个按钮，名为“全部折叠”和“全部展开”，如果点击将折叠/展开页面上的所有手风琴，这也可以正常工作除了一部分我需要帮助：此代码不会将所有glyphicon-chevron图标向上或向下翻转。我该如何添加该功能？

$("#showAllPanels").click(function (e) {
    e.preventDefault();
    $(".panel-collapse").collapse("show");
});

$("#hideAllPanels").click(function (e) {
    e.preventDefault();
    $(".panel-collapse").collapse("hide");
});

Answer 1

您可以使用addClass()和removeClass()等方法。

$("#showAllPanels").click(function (e) {
    e.preventDefault();
    $(".panel-collapse").collapse("show");
    $(".glyphicon-chevron-down").addClass("glyphicon-chevron-up").removeClass("glyphicon-chevron-down");
});

$("#hideAllPanels").click(function (e) {
    e.preventDefault();
    $(".panel-collapse").collapse("hide");
    $(".glyphicon-chevron-up").addClass("glyphicon-chevron-down").removeClass("glyphicon-chevron-up");
});

将所有glyphicon-chevron的方向更改为页面上或下

1 个答案: