在简单的手风琴小部件中上下箭头 [英] Toggle up and down arrows in a simple accordion widget

问题描述

我遵循了几个教程，然后创建了一个简单的手风琴小部件，它可以正常工作，因为您可以在此

DEMO 2

I have followed few tutorials and then created a simple accordion widget, it works fine as you can see in this fiddle

However, I am trying to add a downward arrow when the section is closed and an upper arrow when the section is open - at the right end of the head of each tab in the accordion, just as the image below shows:

Here is the arrows font codes:

.icon-arrowUp:before {
   content: "\f077";
}
.icon-arrowDown:before {
   content: "\f078";
}

Here is what I have tried, I added the downward arrow by default using CSS:

.accordian .accordian-head:before {
        font-family: 'icons';
        content: "\f078";
        float: right;
    }

This added the arrow nicely, however now I want it to replace that arrow with the upward one when the section is open, I have no clue what to do! I tried to add the following CSS and toggle it with JavaScript, but it didn't work:

.accordian .accordian-head .accordian-head-active:before {
        font-family: 'icons';
        content: "\f077";
        background-color: red;
    }


//Accordian
    $('.accordion').each(function () {
        var $accordian = $(this);
        $accordian.find('.accordion-head').on('click', function () {
            $accordian.find('.accordion-body').slideUp();
            if (!$(this).next().is(':visible')) {
                $(this).next().slideDown();
                $(this).addClass('accordian-head-active');
            }
        });
    });

解决方案

I have using CSS border - Arrow

JS

$('.accordion').each(function () {
        var $accordian = $(this);
        $accordian.find('.accordion-head').on('click', function () {
            $accordian.find('.accordion-body').slideUp();
            if (!$(this).next().is(':visible')) {
                $(this).next().slideDown();
                   $('h4 span',this).text("Up Arrow");
            }else{
                $('h4 span',this).text("Down Arrow");
            }
        });
    });

added CSS

.arrow {
    float: right;
    width: 0px;
    height: 0px;
    margin-top: 23px;
    border: 10px solid transparent;
    margin-top: 21px;
    border-top-color: #F3F3F3;
}
.accordion-head.open .arrow {
    margin-top: 11px;
    border-bottom-color: #F3F3F3;
    border-top-color: transparent;
}

DEMO HERE

DEMO 2

这篇关于在简单的手风琴小部件中上下箭头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！