时间戳

首页 > 解决方案 > 循环遍历 nth-child 并更改 css

javascript - 循环遍历 nth-child 并更改 css

问题描述

我找到了 Nikolay Talanov https://codepen.io/suez/pen/vAais的径向菜单，我非常喜欢。现在我希望它更有活力。我希望能够添加 HTML 元素或删除一些元素，而无需更改 CSS。

我正在使用 jquery 并且计算部分已经完成（这很简单）。但我似乎无法正确选择选择器......

<div class="menu">
  <div class="btn trigger">
    <span class="line"></span>
  </div>
  <div class="icons">
    <div class="rotater">
      <div class="btn btn-icon">
        <i class="fa fa-codepen"></i>
      </div>
    </div>
    <div class="rotater">
      <div class="btn btn-icon">
        <i class="fa fa-facebook"></i>
      </div>
    </div>
    <div class="rotater">
      <div class="btn btn-icon">
        <i class="fa fa-google-plus"></i>
      </div>
    </div>
    <div class="rotater">
      <div class="btn btn-icon">
        <i class="fa fa-twitter"></i>
      </div>
    </div>
    <div class="rotater">
      <div class="btn btn-icon">
        <i class="fa fa-dribbble"></i>
      </div>
    </div>
    <div class="rotater">
      <div class="btn btn-icon">
        <i class="fa fa-linkedin"></i>
      </div>
    </div>
    <div class="rotater">
      <div class="btn btn-icon">
        <i class="fa fa-github"></i>
      </div>
    </div>
  </div>
</div>

$(document).ready(function(){
    var countChildren = $(".icons").children().length;
    console.log(countChildren);
    var degChildren = 360 / countChildren;
    console.log(degChildren);

    for(var i = 1; i <= countChildren; i++){
        $(".rotater:nth-child(" + i + ")").css("transform", "rotate(" + degChildren * i + ");");
        $(".menu.active .rotater:nth-child(" + i + ") .btn-icon").css("transform", "translateY(-10em) rotate(" + degChildren * i * -1 + ")");
    };
});

$(document).ready(function() {
  $(".trigger").click(function() {
    $(".menu").toggleClass("active"); 
  });
});

单击触发器按钮时，菜单会激活类。这很好用。不起作用的是CSS生效。在 Nikolay Talanov ( https://codepen.io/suez/pen/vAais ) 的硬编码示例中，它运行良好。

标签： javascriptjquery

解决方案

您需要移动此代码：

var countChildren = $(".icons").children().length;
    console.log(countChildren);
    var degChildren = 360 / countChildren;
    console.log(degChildren);

    for(var i = 1; i <= countChildren; i++){
        $(".rotater:nth-child(" + i + ")").css("transform", "rotate(" + degChildren * i + ");");
        $(".menu.active .rotater:nth-child(" + i + ") .btn-icon").css("transform", "translateY(-10em) rotate(" + degChildren * i * -1 + ")");
    };

到 click 方法，否则它会在设置活动类之前运行。

推荐阅读