我需要在网页上实现多个环形菜单的实现，是随机摆放的 但是我现在给复制了两个环形菜单 第二个菜单的子菜单出不来？请问我这个js该怎么封装呢，位置是用js计算好的？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>圆形菜单</title>
<script src="http://down.admin5.com/demo/code_pop/19/1309/js/jquery-1.11.0.js"></script>
</head>
<style>
body, html {
margin: 0;
padding: 0;
}
</style>
<body>
<!-- 代码部分begin -->
<!--
圆形菜单[最多容纳8个最大正方形菜单块, 若需容纳更多的菜单块,则需要缩小菜单块的大小]
半径 oR = 150px;
圆心坐标(150,150)
-->
<p id="outerp" style="width:300px;height:300px;position: relative;">
<!--
圆心
半径 iR = 50px;
圆心坐标(150,150)
-->
<p id="innerp" style="background: blue;width: 100px;height: 100px;border-radius: 50px;position: absolute;left:100px;top:100px;"></p>
<p class="remind" style="width:200px;height:100px;background:red;position:absolute;left:200px;top:200px;display:none;">
</p>
<!--
==========================
最大菜单块(正方形)
对角线长度 mDLen = oR - iR;
边长 mWidth = mHeight = mDLen的平方 / 2 的结果 再开方 最后取整
==========================
菜单块滑动圆
半径 mR = iR + (mDLen / 2)
==========================
-->
<p class="m1" class="caidan" style="position: absolute; background: yellow;">1</p>
<p class="m2" class="caidan" style="position: absolute; background: red;">2</p>
<p class="m3" class="caidan" style="position: absolute; background: yellow;">3</p>
<p class="m4" class="caidan" style="position: absolute; background: red;">4</p>
<p class="m5" class="caidan" style="position: absolute; background: yellow;">5</p>
<p class="m6" class="caidan" style="position: absolute; background: red;">6</p>
<p class="m7" class="caidan" style="position: absolute; background: yellow;">7</p>
<p class="m8" class="caidan" style="position: absolute; background: red;">8</p>
</p>
<!-- 第二个环形菜单开始 -->
<p id="outerp" style="width:300px;height:300px;position: relative;">
<!--
圆心
半径 iR = 50px;
圆心坐标(150,150)
-->
<p id="innerp" style="background: blue;width: 100px;height: 100px;border-radius: 50px;position: absolute;left:100px;top:100px;"></p>
<p class="remind" style="width:200px;height:100px;background:red;position:absolute;left:200px;top:200px;display:none;">
</p>
<!--
==========================
最大菜单块(正方形)
对角线长度 mDLen = oR - iR;
边长 mWidth = mHeight = mDLen的平方 / 2 的结果 再开方 最后取整
==========================
菜单块滑动圆
半径 mR = iR + (mDLen / 2)
==========================
-->
<p class="m1" class="caidan" style="position: absolute; background: yellow;">1</p>
<p class="m2" class="caidan" style="position: absolute; background: red;">2</p>
<p class="m3" class="caidan" style="position: absolute; background: yellow;">3</p>
<p class="m4" class="caidan" style="position: absolute; background: red;">4</p>
<p class="m5" class="caidan" style="position: absolute; background: yellow;">5</p>
<p class="m6" class="caidan" style="position: absolute; background: red;">6</p>
<p class="m7" class="caidan" style="position: absolute; background: yellow;">7</p>
<p class="m8" class="caidan" style="position: absolute; background: red;">8</p>
</p>
<script type="text/javascript">
var or = 150;
var ir = 50;
var mWidth = 54;
var mDLen = Math.sqrt(2 * Math.pow(mWidth, 2));
//第1菜单块中心点与以o(150,150)为圆心的的X轴的夹角为-90(-PI/2), 求菜单块中心点坐标
var m1X = parseInt((Math.cos(-1 * Math.PI / 2) * (ir + ((or - ir - mDLen) / 2) + mDLen / 2)) + 150 - mWidth / 2);
var m1Y = parseInt((Math.sin(-1 * Math.PI / 2) * (ir + ((or - ir - mDLen) / 2) + mDLen / 2)) + 150 - mWidth / 2);
$(".m1").width(mWidth);
$(".m1").height(mWidth);
$(".m1").offset({ top: m1Y, left: m1X });
//第2菜单块中心点与以o(150,150)为圆心的的X轴的夹角为-45(-PI/4), 求菜单块中心点坐标
var m2X = parseInt((Math.cos(-1 * Math.PI / 4) * (ir + ((or - ir - mDLen) / 2) + mDLen / 2)) + 150 - mWidth / 2);
var m2Y = parseInt((Math.sin(-1 * Math.PI / 4) * (ir + ((or - ir - mDLen) / 2) + mDLen / 2)) + 150 - mWidth / 2);
$(".m2").width(mWidth);
$(".m2").height(mWidth);
$(".m2").offset({ top: m2Y, left: m2X });
//第3菜单块中心点与以o(150,150)为圆心的的X轴的夹角为0(0), 求菜单块中心点坐标
var m3X = parseInt((Math.cos(0) * (ir + ((or - ir - mDLen) / 2) + mDLen / 2)) + 150 - mWidth / 2);
var m3Y = parseInt((Math.sin(0) * (ir + ((or - ir - mDLen) / 2) + mDLen / 2)) + 150 - mWidth / 2);
$(".m3").width(mWidth);
$(".m3").height(mWidth);
$(".m3").offset({ top: m3Y, left: m3X });
//第4菜单块中心点与以o(150,150)为圆心的的X轴的夹角为45(PI/4), 求菜单块中心点坐标
var m4X = parseInt((Math.cos(Math.PI / 4) * (ir + ((or - ir - mDLen) / 2) + mDLen / 2)) + 150 - mWidth / 2);
var m4Y = parseInt((Math.sin(Math.PI / 4) * (ir + ((or - ir - mDLen) / 2) + mDLen / 2)) + 150 - mWidth / 2);
$(".m4").width(mWidth);
$(".m4").height(mWidth);
$(".m4").offset({ top: m4Y, left: m4X });
//第5菜单块中心点与以o(150,150)为圆心的的X轴的夹角为90(PI/2), 求菜单块中心点坐标
var m5X = parseInt((Math.cos(Math.PI / 2) * (ir + ((or - ir - mDLen) / 2) + mDLen / 2)) + 150 - mWidth / 2);
var m5Y = parseInt((Math.sin(Math.PI / 2) * (ir + ((or - ir - mDLen) / 2) + mDLen / 2)) + 150 - mWidth / 2);
$(".m5").width(mWidth);
$(".m5").height(mWidth);
$(".m5").offset({ top: m5Y, left: m5X });
//第6菜单块中心点与以o(150,150)为圆心的的X轴的夹角为135(0.75PI), 求菜单块中心点坐标
var m6X = parseInt((Math.cos(0.75 * Math.PI) * (ir + ((or - ir - mDLen) / 2) + mDLen / 2)) + 150 - mWidth / 2);
var m6Y = parseInt((Math.sin(0.75 * Math.PI) * (ir + ((or - ir - mDLen) / 2) + mDLen / 2)) + 150 - mWidth / 2);
$(".m6").width(mWidth);
$(".m6").height(mWidth);
$(".m6").offset({ top: m6Y, left: m6X });
//第7菜单块中心点与以o(150,150)为圆心的的X轴的夹角为180(PI), 求菜单块中心点坐标
var m7X = parseInt((Math.cos(Math.PI) * (ir + ((or - ir - mDLen) / 2) + mDLen / 2)) + 150 - mWidth / 2);
var m7Y = parseInt((Math.sin(Math.PI) * (ir + ((or - ir - mDLen) / 2) + mDLen / 2)) + 150 - mWidth / 2);
$(".m7").width(mWidth);
$(".m7").height(mWidth);
$(".m7").offset({ top: m7Y, left: m7X });
//第8菜单块中心点与以o(150,150)为圆心的的X轴的夹角为-135(PI), 求菜单块中心点坐标
var m8X = parseInt((Math.cos(-0.75 * Math.PI) * (ir + ((or - ir - mDLen) / 2) + mDLen / 2)) + 150 - mWidth / 2);
var m8Y = parseInt((Math.sin(-0.75 * Math.PI) * (ir + ((or - ir - mDLen) / 2) + mDLen / 2)) + 150 - mWidth / 2);
$(".m8").width(mWidth);
$(".m8").height(mWidth);
$(".m8").offset({ top: m8Y, left: m8X });
//点击事件
$("#innerp").mouseover(function () {
$(".remind").css("display", "block")
$("#innerp").mouseout(function () {
$(".remind").css("display", "none")
});
$(this).click(function () {
$(".caidan").fadeToggle(1000);
})
});
</script>
<!-- 代码部分end -->
</body>
</html>
刚刚看到这个 安利一下 http://www.cnblogs.com/lhb25/...
id="innerp"
id在文档中不能重复出现吧。。。。