如果用户点击另一个按钮,则还原CSS

Question

我有一个jQuery UI手风琴,其中包含每个标题元素的右箭头.当用户单击标题以显示内容时,箭头将变为向下箭头.当用户单击标题以隐藏内容时,箭头会变回其原始形式.

当用户点击其他节标题而没有先关闭上一节时,我的问题就来了.如果用户点击第1部分,箭头将会改变.如果用户然后单击第2部分,则第2部分箭头将更改,但第1部分箭头将保持在向下位置.如果用户点击任何其他部分标题,我需要箭头更改回向右箭头.

这是我的脚本:

var toggleState = true;

$("#wholesale section").on("click", function () {
    if(toggleState) {
        $(this).find(".dropdown-arrow").html("▼");
        $(this).css("background", "#ececec");
    } else {
        $(this).find(".dropdown-arrow").html("►");
        $(this).css("background", "#f7f7f7");
    }
    toggleState = !toggleState;
});

Answer 1

您可以使用激活事件

$("#wholesale").on("accordionactivate", function (e, ui) {
    ui.oldHeader.find(".dropdown-arrow").html("▼");
    ui.oldHeader.css("background", "#ececec");
    ui.newHeader.find(".dropdown-arrow").html("►");
    ui.newHeader.css("background", "#f7f7f7");
});

演示：小提琴

否则尝试类似的东西

var $sections = $("#wholesale section").on("click", function () {
    var $this = $(this).toggleClass('open');
    $sections.not(this).removeClass('open').css("background", "#f7f7f7").find(".dropdown-arrow").html("▼");

    if ($this.hasClass('open')) {
        $this.find(".dropdown-arrow").html("►");
        $this.css("background", "#f7f7f7");
    } else {
        $this.find(".dropdown-arrow").html("▼");
        $this.css("background", "#ececec");
    }
});

演示：小提琴