Question

我正在尝试制作一个带有箭头向上/向下符号的手风琴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（）不同，幻灯片不会立即更改元素的可见性。所以，你运行函数.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"))

将检查任何手风琴内容是否可见。所以，如果那个箭头类是针对整个手风琴的话，很棒。但是，如果箭头可用于任何手风琴转换，您需要以不同的方式设置它。

Answer 2

我认为这应该适合你

    $('#accordion').find('.accordion-toggle').click(function(){
            var thisIt = $(this);
            //hide the other panels and return arrows to up
            $('.accordion-content').not(thisIt.next('.accordion-content')).slideUp('fast',function(){
              $(this).closest('.accordion-toggle').find('span').removeClass('icon-arrow-up').addClass('icon-arrow-down');
            });
            //expand or collapse this panel
            thisIt.next('.accordion-content').slideToggle('fast' , function(){
               $(this).closest('.accordion-toggle').find('span').toggleClass('icon-arrow-down icon-arrow-up');
            });
        });

可能有帮助

如何在点击时恢复添加/删除课程？

2 个答案: