Je dois implémenter plusieurs menus en anneau sur la page Web, qui sont placés de manière aléatoire. Mais maintenant, j'ai copié deux menus en anneau, mais le sous-menu du deuxième menu ne peut pas être affiché ? S'il vous plaît dites-moi comment encapsuler ce js. La position est-elle calculée à l'aide de js ? {code...}

Je viens de voir ça, vas-y doucement http://www.cnblogs.com/lhb25/...

id="innerp" L'ID ne peut pas apparaître à plusieurs reprises dans le document. . . .

javascript - Implémentation de plusieurs menus en anneau sur la page? En attente en ligne, urgent ! Dieu sauve-moi!-Questions et réponses sur le réseau chinois PHP

Je dois implémenter plusieurs menus en anneau sur la page Web, qui sont placés de manière aléatoire. Mais maintenant, j'ai copié deux menus en anneau. Le sous-menu du deuxième menu ne peut pas être affiché ? S'il vous plaît dites-moi comment encapsuler ce js. La position est-elle calculée à l'aide de 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>