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

我在“我们做什么”下实施了这个手风琴脚本

我需要向每个导航项添加向上和向下箭头， 如此图所示 。 我在哪里以及如何将这两种状态（非活动箭头和活动箭头）编码到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(){ $('').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; }