Question

需要帮助的人我是javascript的新手，当我点击当前标签折叠时，如何将折叠图标的状态再次设置为“+”？我的问题是当我再次关闭标签时，“ - ”当前标签有该标志，这是代码和示例链接：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);
    }
});

将背景颜色设置为橙色，将负号设置为背景图像的类active也将切换为活动元素。您也可以从$this.parent().toggleClass('active');和if子句中删除else并将其设置在下方，因为无论如何都要切换。

如评论中所述，如果您想继续更改if和else子句中所点击元素的类，您还可以考虑使用addClass("active")和{{ 1}}而不是removeClass("active")，因为知道是否应该添加或删除类。

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

可折叠手风琴恢复活跃状态

1 个答案: