在一个简单的手风琴小部件中切换上下箭头答案

【问题标题】：Toggle up and down arrows in a simple accordion widget在一个简单的手风琴小部件中切换上下箭头
【发布时间】：2015-06-11 17:13:25
【问题描述】：

我遵循了一些教程，然后创建了一个简单的手风琴小部件，它工作正常，正如您在 fiddle 中看到的那样

但是，我试图在该部分关闭时添加一个向下箭头，在该部分打开时添加一个向上箭头 - 在手风琴中每个选项卡头部的右端，如下图所示：

这是箭头字体代码：

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

【问题讨论】：

HERE 适合你玩
@BatuZet 这行得通！但我怎样才能用我的箭头替换它？我做不到...我尝试添加代码，但它不会这样做。请指教
如果您查看.accordion .accordion-head span 样式，您会看到我使用过的background-image。检查并根据您的喜好进行相应更改。
我刚试过：jsfiddle.net/x5hPR
我尝试过类似：$accordian.find('.accordian-head').css(":before",'\f078')

标签： javascript jquery html css

【解决方案1】：

我使用 CSS 边框 - 箭头

$('.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

【讨论】：

一个问题，当您打开一个部分然后单击并打开另一个部分时，前一个中的箭头不会变回，它保持打开状态。
您只要求更改箭头，我现在已经解决了这个问题。检查this link
@Nandhakumar 这对我有用，直到我将大量文本添加到<div class="accordion-body">。当我这样做时，手风琴“盒子”按预期弹开，但“盒子”的顶部（读者可能希望开始阅读的地方）可能远离屏幕。我们如何解决这个问题，以便将用户请求的accordion-body div 带到焦点区域的顶部？

【解决方案2】：

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

在头部，H4 我添加了一个带有“箭头文本”的跨度

<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

【讨论】：

一个问题，当您打开一个部分然后单击并打开另一个部分时，前一个中的箭头不会变回，它保持打开状态。