可折叠手风琴 return 到活动状态

Question

需要javascript新手的帮助，当我点击当前选项卡折叠时，如何使折叠图标的状态再次变为“+”？我的问题是每当我再次关闭选项卡时“-”当前选项卡都有那个符号，这里是代码和示例 link：http://www.dev.redefinegraphicstudio.com/acp/SLOCPI%20Mobile/HOMEPAGE.html

$(document).ready(function(){
$('.expand-collapse-menu > li > a').on('click', function(){
    var $this =  $(this);
    if($this.parent().hasClass('current')){
        $this.parent().parent().find('ul').stop().slideUp();
    }else{
        $this.parent().parent().find('li').each(function(){ $(this).removeClass('active'); })
        $this.parent().parent().find('ul').stop().slideUp();
        $this.parent().toggleClass('active');
        $this.parent().find('ul').stop().slideToggle(500);
    }
});

$(".tabs-menu").find('li').each(function(){
    if($(this).hasClass('current')){
        var tab = $(this).find('a').attr("href");
         $(".tab-content").not(tab).css("display", "none");
         $(tab).fadeIn();
    }
});

$(".tabs-menu a").click(function(event) {
    event.preventDefault();
    $(this).parent().addClass("current");
    $(this).parent().siblings().removeClass("current");
    var tab = $(this).attr("href");
    $(".tab-content").not(tab).css("display", "none");
    $(tab).fadeIn();
});


});

Answer 1

问题是你的第一个函数，当你把它改成

 $('.expand-collapse-menu > li > a').on('click', function () {
    var $this = $(this);
    if ($this.parent().hasClass('active')) {  // change to active instead of current
        $this.parent().toggleClass('active');  // add this line
        $this.parent().parent().find('ul').stop().slideUp();
    } else {
        $this.parent().parent().find('li').each(function () {
            $(this).removeClass('active');
        });
        $this.parent().parent().find('ul').stop().slideUp();
        $this.parent().toggleClass('active');
        $this.parent().find('ul').stop().slideToggle(500);
    }
});

class active 将背景颜色设置为橙色，减号作为背景图像也将针对活动元素进行切换。您还可以从 if 和 else 子句中删除 $this.parent().toggleClass('active'); 并将其设置在下方，因为它无论如何都应该被切换。

如评论中所述，如果想一直改变if和else子句中被点击元素的class，也可以考虑使用addClass("active") 和 removeClass("active") 而不是 toggleClass("active") 因为它知道是否应该添加或删除 class。

我已经用您页面上的相关部分设置了 Fiddle。

可折叠手风琴 return 到活动状态

collapsible accordion return to active status

javascript

jquery

accordion

jquery-ui-tabs