第一次单击html中的按钮后，无法根据需要显示Piemenu

Question

我正在使用wheel-nav制作饼状菜单。我从http://pmg.softwaretailoring.net/获得了代码。我在单击按钮时显示菜单，但是当我再次单击按钮时，菜单消失，文本也消失。 我试图找出解决方案，但失败了，所以我决定每次单击按钮时都重新加载该Piemenu，但是发生了相同的事情，首先它显示为应有的状态，但是再次单击按钮时，它表现异常。

这是使我的问题清楚的图像。

第一次单击按钮时

第一次之后

这是我用于在单击按钮时创建饼图菜单的代码

  <script>
//circular menu
var i = 0;

function make() {
    if(i===0)
    {
        i=1;
  console.log("here2");
  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', 'Games', 'Security settings', 'profile', 'signout']);
  }
  else
  {
      console.log('here3');
      $('#piemenu').load(document.URL +  ' #piemenu');
      i=0;

  }

}

和html代码：

    <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-cssmode data-wheelnav-init>
  <div data-wheelnav-navitemicon='?' onmouseup='alert("Place your logic here.");'></div>
  <div data-wheelnav-navitemicon='slideshare' onmouseup='requests();'></div>
  <div data-wheelnav-navitemicon='pen' onmouseup='create();'></div>
  <div data-wheelnav-navitemicon='arrowright' onmouseup='alert("Place your logic here.");'></div>
  <div data-wheelnav-navitemicon='gear' onmouseup='settings();'></div>
  <div data-wheelnav-navitemicon='edit' onmouseup='profile();'></div>
  <div data-wheelnav-navitemicon='disconnect' onmouseup='alert("Place your logic here.");'></div>
</div>

和CSS代码：

#piemenu > svg { width: 100%; height: 100%;}
#piemenu { height: 400px; width: 400px;right:-50px;top:-119px;position: 
fixed;}
@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; }
  [class|=wheelnav-piemenu-title] > tspan { font-family: Impact, Charcoal, 
  sans-serif; font-size: 24px; }
  .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; }

Answer 1

我建议您仅在window.onload中调用一次createWheel（以及make函数中的所有初始化逻辑）。

并使用piemenu.spreadWheel(); 显示/隐藏菜单。