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

Question

我已经在 我们做什么 下实现了这个手风琴脚本，

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

Answer 1

您可以使用一些简单的 CSS 类来完成此操作，因为 a 在打开时具有不同的类：

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