删除jquery类的问题

时间:2014-05-04 17:50:59

标签: javascript jquery removeclass

有人可以帮我解决这个问题吗? 基本上我希望脚本在点击时将'active'类添加到'li',并在另一次点击时删除它 - 好吧,它会添加类并自动删除它:-)我真的很感激任何解决方案。

PS。我已经查看了有关此问题的其他问题,但我没有找到任何可以帮助我的答案。

jQuery(document).ready(function() {
    jQuery('li').each(function() {
        var faq = jQuery(this), state = true, answer = faq.next('.answer').hide().css('height','auto').slideUp();
        faq.click(function() {
            state = !state;
            answer.slideToggle(state);
            faq.addClass('active',state);
              if(jQuery("li").hasClass("active")) {
              jQuery(".active").remove(); }
        });
    });
});

JSFiddle

jQuery(".active").removeClass(); }

解决了问题的一半

1 个答案:

答案 0 :(得分:2)

实际上你需要尝试.removeClass() .. !!

JS FIDDLE

jQuery(document).ready(function() {
    jQuery('li').each(function() {
        var faq = jQuery(this), state = true, answer = faq.next('.answer').hide().css('height','auto').slideUp();
        faq.click(function() {
            state = !state;
            answer.slideToggle(state);
            faq.addClass('active',state);
              if(jQuery("li").hasClass("active")) {
              jQuery(".active").removeClass(); }
        });
    });
});

使用.toggleClass()

使用

jQuery(document).ready(function() {
    jQuery('li').each(function() {
        var faq = jQuery(this), state = true, answer = faq.next('.answer').hide().css('height','auto').slideUp();
        faq.click(function() {
            state = !state;
            answer.slideToggle(state);
            faq.addClass('active',state);
           $( this ).toggleClass( "active" );
        });
    });
});

DEMO FIDDLE

<强>更新

根据@AndyAndy的评论更新:

  

想象

  • 有一个“+”图标,点击它会变为“ - ”图标   并且答案出现了。

  • jQuery(document).ready(function() {
        jQuery('li').each(function() {
            var faq = jQuery(this), answer = faq.next('.answer').hide().css('height','auto').slideUp();
            faq.click(function() {
    
                answer.slideToggle('.active');
    
    
                if($(this).text()=='+')
                {
                $(this).text('-');
                }
                else{
                $(this).text('+');
                }
    
    
            });
        });
    });
    

    updated fiddle