Question

首先，我是一个非常新的引导程序，所以试着在这个上忍受我。我一直在一个有自助边栏的网站上工作，我正努力让自己正常工作。我已经看过其他的例子，但我不知道该怎么做。

在侧边栏上，我在每个项目之前使用<i>元素图标，在这种情况下为toggle icon-chevron-right。我想要做的是当有人点击侧边栏上的项目，显示子项目时，图标将更改为切换icon-chevron-right到toggle icon-chevron-down。

我玩过一些JavaScript试图让它工作，但无济于事。任何见解都会有所帮助。

Answer 1

您可以使用带右箭头和右箭头的精灵，然后使用CSS通过调整背景位置在两者之间切换。

像：

element {
    background: url(images/whatever.png) no-repeat;
}

 element:active {
    background: url(images/whatever.png) no-repeat 10px 10px;
}

玩这个位置直到你说对了

Answer 2

点击<a>时，您可以更改图标上的课程：

$('a').click(function () {
   var icon = $(this).find('i');
   if (icon.hasClass('icon-chevron-down')) {
      icon.removeClass('icon-chevron-down').addClass('icon-chevron-right');
   }
   else {
      icon.removeClass('icon-chevron-right').addClass('icon-chevron-down')
   }
});

单击时更改引导程序图标位置

2 个答案: