Question

我找到了我非常喜欢的Nikolay Talanov https://codepen.io/suez/pen/vAais提供的放射状菜单。现在，我希望它更具动态性。我希望能够添加HTML元素或删除一些HTML元素而不必更改CSS。

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

router.beforeEach((to, from, next) => {
  store.dispatch('getEntitlements').then(entitlements => {
     // Do your processing and setup here.
     // There are many ways to get the entitlements into your component...
     next();
  });

<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>

单击触发器btn时，菜单将激活该类。很好不起作用的是CSS生效了。在Nikolay Talanov（https://codepen.io/suez/pen/vAais）的硬编码示例中，它工作正常。

Answer 1

您需要移动以下代码：

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 + ")");
    };

单击方法，否则它将在设置活动类之前运行。

遍历nth-child并更改CSS

1 个答案: