第一次点击 html 中的按钮后无法按要求显示 piemenu

Question

我正在使用滚轮制作饼图菜单-nav.I 从 http://pmg.softwaretailoring.net/.I 获取代码，在单击按钮时显示菜单，但是当我再次单击按钮时，馅饼菜单消失了，文本也消失了。我尝试找出解决方案但失败了所以我决定每次点击按钮时重新加载 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(); 来 show/hide 您的菜单。

第一次点击 html 中的按钮后无法按要求显示 piemenu

Not able to display piemenu as required after first time clicking the button in html

html

javascript

css

jquery

wheelnav.js