jquery - 如何在单击时恢复添加/删除类？

Question

我正在尝试制作一个带有向上/向下箭头符号的 Accordion div，该符号在单击时会发生变化。当我把它放下时，箭头从下变到上，但没有反转......

代码如下:

accordion: function() {
    $('#accordion').find('.accordion-toggle').click(function(){

        //expand or collapse this panel
        $(this).next().slideToggle('fast');

        if($('.accordion-content').is(":visible")){
            //console.log('visible');
            $(this).find('span').removeClass('icon-arrow-down').addClass('icon-arrow-up');
        } else {
            //console.log('invisible');
            $(this).find('span').removeClass('icon-arrow-up').addClass('icon-arrow-down');
        }

        //hide the other panels
        $('.accordion-content').not($(this).next()).slideUp('fast');
    });
},

Answer 1

使用 JQuery Slide 检查其可见性时会遇到问题。与 .show() 和 .hide() 不同，slide 不会立即改变元素的可见性。因此，您运行函数 .slideToggle()，当元素仍在滑动(又名，仍然可见)时，您询问它是否可见。所以，你总是得到真实的，因此让箭头向下。

要么添加一个类并检查它，如下所示:

$(this).next().slideToggle('fast').toggleClass('im-open-yo');
...
if($('.accordion-content').hasClass("im-open-yo"){
...
$('.accordion-content').not($(this).next()).slideUp('fast').removeClass('im-open-yo');

或者在函数完成回调上运行查询，因为届时元素的可见性将发生变化:

 $(this).next().slideToggle('fast',function(){
 if(){...} 
});

还有一点要注意，

if($('.accordion-content').is(":visible"))

将检查任何 Accordion 内容是否可见。因此，如果具有箭头类的是整个 Accordion ，那就太好了。但是，如果箭头可用于任何 Accordion 开关，则您需要进行不同的设置。