手风琴 - 为每个导航项目添加箭头？

【问题标题】：Accordion - add arrow to each nav item?手风琴 - 为每个导航项目添加箭头？
【发布时间】：2011-09-08 02:33:38
【问题描述】：

我已经在What We Do下实现了这个手风琴脚本

我需要为每个导航项添加向上和向下箭头，如this pic 所示。我在哪里以及如何将两种状态（非活动箭头和活动箭头）编码到 jQuery 中。我想我需要把它编码到 jQuery 中？

【问题讨论】：

您使用的是什么标记？你试过什么？在此处发布代码会有所帮助，在JS Fiddle 或JS Bin 等网站上进行现场演示也有很大帮助。

标签： jquery css accordion

【解决方案1】：

您可以使用一些简单的 CSS 类来做到这一点，因为 a 在打开时具有不同的类：

toggler toggler-closed 和 toggler toggler-opened

.toggler.toggler-opened {
    /* a background image on the right side with arrow down? */
}

.toggler.toggler-closed {
    /* a background image on the right side with arrow to the right? */
}

【讨论】：

【解决方案2】：

这看起来比较简单，虽然我可能使用了太多的 jQuery：

jQuery:

$(document).ready(
    function(){
        $('.toggler').each(function(){
            $('<span></span>').appendTo($(this));
        });
        $('.toggler-closed > span').text('▶');
        $('.toggler-opened > span').text('▼');
    });

css:

.toggler span {
  float: right;
  background-color: #eee;
  border-radius: 0.2em;
  display: inline-block;
  width: 1em;
  line-height: 1em;
}

【讨论】：