Question

我已经遵循了一些教程，然后创建了一个简单的手风琴小部件，它可以正常工作，你可以在这里看到fiddle

但是，我试图在部分关闭时添加向下箭头，在部分打开时添加上箭头 - 在手风琴中每个标签的头部右端，如下图所示： / p>

enter image description here 这是箭头字体代码：

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

这是我尝试过的，我默认使用CSS添加向下箭头：

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

这很好地添加了箭头，但是现在我希望它在部分打开时用向上的箭头替换那个箭头，我不知道该怎么办！我尝试添加以下CSS并使用JavaScript切换它，但它没有工作：

.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');
            }
        });
    });

Answer 1

我使用CSS边框 - 箭头

<强> 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");
            }
        });
    });

添加了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

Answer 2

我已经制作了一个简单的JQuery解决方案来实现这一点。我相信你可以改进它，但至少它正朝着正确的方向发展。

在头部，H4我添加了一个带有＆＃34;箭头文字＆＃34;

的范围

<h4>Section A<span>Down Arrow</span></h4>

..更改了跨度的css以使其正确浮动

.accordion .accordion-head span {
    float:right
}

最后添加了一个JQuery来更改文本

...   
if (!$(this).next().is(':visible')) {
$(this).next().slideDown();
    $('h4 span',this).text("Up Arrow");
}else{
    $('h4 span',this).text("Down Arrow");
}
...

JSFiddle

在简单的手风琴小部件中切换向上和向下箭头

2 个答案: