Saya perlu melaksanakan berbilang menu cincin pada halaman web, yang diletakkan secara rawak Tetapi sekarang saya telah menyalin dua menu cincin, tetapi submenu menu kedua tidak boleh dipaparkan? Tolong beritahu saya bagaimana untuk merangkum js ini Adakah kedudukan dikira menggunakan js? {kod...}

Baru tengok ni, tenang je http://www.cnblogs.com/lhb25/...
id="innerp" ID tidak boleh muncul berulang kali dalam dokumen. . . .
javascript - Pelaksanaan berbilang menu cincin pada halaman? Menunggu dalam talian, segera! Tuhan selamatkan saya!-Soal Jawab Rangkaian PHP Cina

Saya perlu melaksanakan beberapa menu dering pada halaman web, yang diletakkan secara rawak Tetapi sekarang saya telah menyalin dua menu dering Submenu menu kedua tidak boleh dipaparkan. Tolong beritahu saya bagaimana untuk merangkum js ini Adakah kedudukan dikira menggunakan 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>