Question

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

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

这是我的剧本：

var toggleState = true;

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

Answer 1

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

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

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

Answer 2

您可以使用activate-event

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

演示：Fiddle

否则尝试类似

的内容

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

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

演示：Fiddle

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

2 个答案: