Javascript 如果用户单击其他按钮，则恢复CSS

我有一个jQueryUI手风琴，每个标题元素都有一个右箭头。当用户单击标题以显示内容时，箭头将变为向下箭头。当用户单击标题隐藏内容时，箭头将变回其原始形式

我的问题是，当用户在没有先关闭前一节的情况下单击另一节标题时。如果用户单击第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;
});

---

您可以为您拥有的每个按钮添加一个类，并且在每次单击时将每个按钮恢复到“正常”位置，然后切换单击的箭头

$("#wholesale section").on("click", function () {
    $(".buttons").each(function(){
        $(this).find(".dropdown-arrow").html("►");
        $(this).css("background", "#f7f7f7");
    })
    $(this).find(".dropdown-arrow").html("▼");
    $(this).css("background", "#ececec");
});

将名为button的类添加到您拥有的每个按钮中。这样，您也不需要切换。除非您希望它是可折叠的。

您可以使用

演示：

---

还有别的办法吗

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");
    }
});

---

演示：

试试看，我假设header1的内容也应该被隐藏？没有jquery UI，你可以很容易地做到这一点。试试这个：

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");
    }
});