간단하고 사용하기 쉬운 클릭 전개 신축 효과

<SCRIPT>

function openP(_id)

    {

       var select_id = parseInt(_id.replace("box",""));

       for (i=1;i<=4;i++)

       {

          if (i==select_id)

          {

              document.getElementById("box"+i).style.display = "block";

          }

          else

          {

             document.getElementById("box"+i).style.display = "none";

          }

       }

    }

</SCRIPT>

 1 <a href="###" onmouseover="openP('box1')">1、 1</a>

 2 <p id="box1">

 3     box1 .

 4 </p>

 5 <p><a href="###" onmouseover="openP('box2')">2、 2</a></p>

 6 <p id="box2" style="display:none">

 7     box2 .

 8 </p>

 9 <a href="###" onmouseover="openP('box3')">3、 3</a>

10 <p id="box3" style="display:none">

11     box3 .

12 </p>

13 <p><a href="###" onmouseover="openP('box4')">4、 4</a></p>

14 <p id="box4" style="display:none">

15     box4 .

16 </p>

17 <br />

18 <p><a href="http://www.webdm.cn"> </a> -   -  ！</p>

인스턴스:

function showlist (_id) {

              // 

            var aMenu = document.getElementsByClassName("menu")[0], aDt = aMenu.getElementsByTagName("dt");

            var len = aDt.length;

            var select_id = parseInt(_id.replace("month", ""));

                for (i = 1; i <= len; i++) {

                    if (i == select_id) {

                        document.getElementById("month" + i).style.display = "block";

                    }

                    else {

                        document.getElementById("month" + i).style.display = "none";

                    }

            }

            }

호출:

<dt onmouseover="showlist('month1')"><ul class="month"><li class="w288 textLeft">3 </li><li>2</li><li>0</li><li>0</li><li>0</li><li>0</li><li>0</li><li>0</li></ul></dt>