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

Question

我已经跟随一些教程创建了一个简单的手风琴小部件，它可以正常工作，您可以在这个链接中看到。

然而，我正在尝试在手风琴每个选项卡头部的右端添加一个向下箭头（当该部分关闭时）和一个向上箭头（当该部分打开时），就像下面的图片所示：

这是箭头字体代码：

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

- Leo

---

这里有一些你可以玩耍的东西。 - Batu.Khan

@BatuZet 这个方法可行！但是我该如何用我的箭头替换它呢？我试着添加代码，但它就是不起作用。请给予建议。 - Leo

如果你查看.accordion .accordion-head span的样式，你会看到我使用的background-image。请检查并根据你喜欢的方式进行更改。 - Batu.Khan

我刚刚尝试了：http://jsfiddle.net/x5hPR/ - Leo

我尝试了类似这样的代码：$accordian.find('.accordian-head').css(":before",'\f078') - Leo

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;
}

这里有示例

这里是另一个示例

- Nandhakumar

---

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

你只要求更改箭头，无论如何我现在已经修复了。请查看此链接：http://jsfiddle.net/nandhakumarsri9/gu7h3/8/ - Nandhakumar

@Nandhakumar 在我向<div class="accordion-body">添加大量文本之前，这对我很有效。当我这样做时，手风琴“框”会像预期的那样弹出，但是“框”的顶部（读者可能希望开始阅读的地方）可能远离屏幕。我们如何修复这个问题，以便用户请求的accordion-body div被带到焦点区域的顶部？ - Parapluie

Answer 2

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

在Head中，我添加了一个带有“箭头文本”的span标签。

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

..更改了 span 元素的 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

Translated text:

{{链接1：JSFiddle}}

- Dean Meehan

---

然而有一个问题，当您打开一个部分并单击并打开另一个部分时，先前部分中的箭头不会改回来，它保持打开状态。 - Leo