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

Question

我在What We Do

下实施了这个手风琴脚本

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

Answer 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? */
}

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