仅使用javascript创建径向菜单

嘿，我正在尝试以最通用的方式创建一个径向菜单。 我在这里找到了一个径向菜单示例： 我已经把SCS翻译成了css 我已经尝试删除如下核心css

.rotater:nth-child(1) {
  transform: rotate(-20deg);
}

并将其转换为jquery代码，如下所示：

     var rotateDegreeOne     = -20;
     for(var i=1;i<10;i++){
        $('.rotater:nth-child('+i+')').css('transform', 'rotate('+rotateDegreeOne+'deg)');
        rotateDegreeOne = rotateDegreeOne + rotateDifferenceOne;
    }

将其转换为以下代码：

var rotateDegreeTwo     = 20;
  var rotateDifferenceTwo = -40;
for(var i=1;i<10;i++){
   $('.menu.active .rotater:nth-child('+i+') .btn-icon').css('transform','translateY(-10em) rotate('+rotateDegreeTwo+'deg)')
    rotateDegreeTwo = rotateDegreeTwo + rotateDifferenceTwo;
  }

---

整个转换需要包装在click事件的侦听器中。在原始代码中，每次菜单激活类时（每次单击菜单时），css都会转换按钮。在您的版本中，它只在文档准备好时发生一次。为了模仿这种行为，每次都需要变换按钮。现在，如果菜单处于活动状态，我们将其旋转一个方向并平移y，如果菜单处于非活动状态，则仅将其向后旋转

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

      var rotateDegreeOne     = -20;
      var rotateDegreeTwo     = 20;
      var rotateDifferenceOne = 40;
      var rotateDifferenceTwo = -40;
      for(var i=1;i<10;i++){
       $('.rotater:nth-child('+i+')').css('transform', 'rotate('+rotateDegreeOne+'deg)');

       if ($(".menu").hasClass("active")) {
         $('.menu .rotater:nth-child('+i+') .btn-icon').css('transform','translateY(-10em) rotate('+rotateDegreeTwo+'deg)')
       } else { 
         $('.menu .rotater:nth-child('+i+') .btn-icon').css('transform','rotate('+(rotateDegreeTwo*-1)+'deg)')
       }
       rotateDegreeOne = rotateDegreeOne + rotateDifferenceOne;
       rotateDegreeTwo = rotateDegreeTwo + rotateDifferenceTwo;
    }
  });
});

$（文档）.ready（函数（）{
$（“.trigger”）。单击（函数（）{
$（“.menu”）.toggleClass（“活动”）；
var rotateDegreeOne=-20；
var rotateDegreeTwo=20；
var旋转微分方程=40；
var旋转微分wo=-40；
对于（var i=1；i
  $(document).ready(function() {
    $(".trigger").click(function() {
      $(".menu").toggleClass("active"); 

      var rotateDegreeOne     = -20;
      var rotateDegreeTwo     = 20;
      var rotateDifferenceOne = 40;
      var rotateDifferenceTwo = -40;
      for(var i=1;i<10;i++){
       $('.rotater:nth-child('+i+')').css('transform', 'rotate('+rotateDegreeOne+'deg)');

       if ($(".menu").hasClass("active")) {
         $('.menu .rotater:nth-child('+i+') .btn-icon').css('transform','translateY(-10em) rotate('+rotateDegreeTwo+'deg)')
       } else { 
         $('.menu .rotater:nth-child('+i+') .btn-icon').css('transform','rotate('+(rotateDegreeTwo*-1)+'deg)')
       }
       rotateDegreeOne = rotateDegreeOne + rotateDifferenceOne;
       rotateDegreeTwo = rotateDegreeTwo + rotateDifferenceTwo;
    }
  });
});