Javascript 循环菜单'；当我第二次单击按钮时，s的对齐方式会发生变化

我正在制作一个循环菜单，当我点击一个按钮时它就会打开。但当我再次单击按钮时，其对齐方式会发生变化

第一次单击用户按钮：

第二次单击用户按钮：

我试图将它上传到JSFIDLE上，但圆圈没有出现在那里。非常抱歉

代码如下：

HTML CSS:

---

你可能想把你的整个页面都包含在一个代码笔或小提琴中，然后在这里发布链接。我没有看到任何包含在代码笔中的代码question@repzero我在代码中包含了一些不起作用的东西，比如轮子和用户按钮。其他东西与这两个没有关系

<a class=" glyphicon glyphicon-user" href="#" style=";font-size: 36px;color: white;padding: 10px;padding-right: 20px;" id="open" onclick="make()"></a>
<div id='piemenu' data-wheelnav data-wheelnav-slicepath='PieSlice' data-wheelnav-spreader data-wheelnav-spreaderpath='PieSpreader' data-wheelnav-marker data-wheelnav-markerpath='PieLineMarker' data-wheelnav-rotateoff data-wheelnav-navangle='167.14285714285714'
data-wheelnav-titleheight='25.714285714285715' data-wheelnav-cssmode data-wheelnav-init>
  <div data-wheelnav-navitemicon='?' style="font-size:50px;" onmouseup='alert("Place your logic here.");'></div>
  <div data-wheelnav-navitemicon='slideshare' style="font-size:50px;" onmouseup='alert("Place your logic here.");'></div>
  <div data-wheelnav-navitemicon='pen' style="font-size:50px;" onmouseup='alert("Place your logic here.");'></div>
  <div data-wheelnav-navitemicon='key' onmouseup='alert("Place your logic here.");'></div>
  <div data-wheelnav-navitemicon='gear' class=" glyphicon glyphicon-asterisk" style="font-size:50px;" onmouseup='alert("Place your logic here.");'></div>
  <div data-wheelnav-navitemicon='disconnect' style="font-size:50px;" onmouseup='alert("Place your logic here.");'>
    <a class=" glyphicon glyphicon-log-out"></a>
  </div>
  <div data-wheelnav-navitemicon='' style="font-size:50px;" onmouseup='alert("Place your logic here.");'></div>
</div>

var i = 0;

function make() {
  var piemenu = new wheelnav('piemenu');;
  piemenu.spreaderInTitle = icon.plus;
  piemenu.spreaderOutTitle = icon.cross;
  piemenu.spreaderRadius = piemenu.wheelRadius * 0.13;
  piemenu.clockwise = false;
  piemenu.sliceInitPathFunction = piemenu.slicePathFunction;
  piemenu.initPercent = 0.1;
  piemenu.wheelRadius = piemenu.wheelRadius * 0.83;
  piemenu.navItemsContinuous = true;
  piemenu.sliceAngle = 25.714285714285715;
  piemenu.createWheel();
  piemenu.setTooltips(['help', 'friend  
        request ','
        create ','
        privacy ','
        settings ','
        signout ','
        download ']);
}

#piemenu > svg {
  width: 100%;
  height: 100%;
}

#piemenu {
  height: 400px;
  width: 400px;
  float: right;
  margin-right: -5%;
  top: -103px;
  position: relative;
}

@media (max-width: 400px) {
  #piemenu {
    height: 300px;
    width: 300px;
  }
}

[class|=wheelnav-piemenu-slice-basic] {
  fill: #497F4C;
  stroke: none;
}

[class|=wheelnav-piemenu-slice-selected] {
  fill: #497F4C;
  stroke: none;
}

[class|=wheelnav-piemenu-slice-hover] {
  fill: #497F4C;
  stroke: none;
  fill-opacity: 0.77;
  cursor: pointer;
}

[class|=wheelnav-piemenu-title-basic] {
  fill: #333;
  stroke: none;
}

[class|=wheelnav-piemenu-title-selected] {
  fill: #fff;
  stroke: none;
}

[class|=wheelnav-piemenu-title-hover] {
  fill: #222;
  stroke: none;
  cursor: pointer;
}

.wheelnav-piemenu-spreader-in,
.wheelnav-piemenu-spreader-out {
  fill: #444;
  stroke: #444;
  stroke - width: 2;
  cursor: pointer;
}

.wheelnav-piemenu-spreadertitle-in,
.wheelnav-piemenu-spreadertitle-out {
  fill: #eee;
  stroke: #444;
  cursor: pointer;
}

.wheelnav-piemenu-marker {
  stroke: #444;
  stroke-width: 2;
}