javascript - 动态照亮每个列表项子项的背景

标签 javascript jquery html css sass

我有一个堆叠式下拉菜单,我希望每个菜单项逐渐变亮。我已经使用 sass lighten() 规则手动完成了它,但我想知道是否有一种方法可以为每个新的列表项增量动态地减轻 5%。我想应该结合一些 jquery 来实现这一点。

fiddle :http://jsfiddle.net/k2fjzro4/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="list-item-1">1</li>
  <li class="list-item-2">2</li>
  <li class="list-item-3">3</li>
  <li class="list-item-4">4</li>
  <li class="list-item-5">5</li>
</ul>

最佳答案

您可以使用 SASS 的 @for

ul li {
  padding: 10px;
  background-color: #333;
}

@for $i from 1 through 10 {
  li.list-item-#{$i} {
     background-color: lighten(#333, $i*5%);
  }  
}

如果您希望它动态地发生在较大数量的元素上,那么 JS 可能是不可避免的。

关于javascript - 动态照亮每个列表项子项的背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47096538/

相关文章:

javascript - 在 json 字符串中添加父级别

javascript - MVC 4 中对 Controller 的 Ajax 调用为空

javascript - 向下滚动 iFrame - jQuery/JS

html - CSS模糊背景问题

javascript - 如何使 CSS 背景的一部分完全适合浏览器

javascript - 当它更改为输入字段时,如何获得相同的 DIV 名称或 id

javascript - 如何消除 angular-cli 站点中的渲染阻塞?

javascript - 对象不支持使用 AJAX 的此属性或方法

javascript - $.ajax() 不提供从静态 json 文件获取 json 的请求

单击事件上的 Jquery slideUp 在 IE 7、8、9 中不起作用