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

【问题标题】：Change the direction of ALL glyphicon-chevron to either up or down on a page在页面上将所有 glyphicon-chevron 的方向更改为向上或向下
【发布时间】：2016-09-29 22:34:06
【问题描述】：

我在页面上有多个手风琴，用户可以单击 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");
});

【问题讨论】：

您已经知道如何切换课程？ $(".glyphicon").addClass("glyphicon-chevron-up").removeClass("glyphicon-chevron-down");
@adeneo 但是如果在点击展开/折叠所有按钮之前，其中一些是向上的，一些是向下的，它会搞砸
嗯，是的，这就是为什么您专门添加和删除类而不是仅仅切换
@adeneo 好的，谢谢。首先没有注意到那部分。

标签： javascript jquery html css

【解决方案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");
});

【讨论】：