Accordion - add arrow to each nav item?

十年热恋 提交于 2020-01-03 01:56:10

问题


I have implemented this accordions script under What We Do

I need to add up and down arrows to each nav item as seen in this pic. Where and how do I code in the two states(inactive arrow & active arrow) into the jQuery. Im thinking I need to code this into the jQuery?


回答1:


You can do this with some simple CSS classes, since the a's have different classes when they are opened:

toggler toggler-closed and 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:


This seems relatively simple, though I'm perhaps using a little too much 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;
}


来源:https://stackoverflow.com/questions/4239439/accordion-add-arrow-to-each-nav-item

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!