超実用的なJavaScriptコードセグメントItem 2--伸縮メニューバー

9571 ワード

JavaScript js。メニューバー超実用コードセグメントメニューバー

メニューバー
タイトルをクリックすると、そのタイトルの下のメニューが表示されているかどうかを判断し、表示されている場合は隠します.隠している場合は表示します.

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css"> *{margin:0; padding:0; font-size:13px; list-style:none;} .menu{width:210px; margin:50px auto; border:1px solid #ccc;} .menu p{height:25px; line-height:25px; font-weight:bold; background:#eee; border-bottom:1px solid #ccc; cursor:pointer; padding-left:5px;} .menu div ul{display:none;} .menu li{height:24px; line-height:24px; padding-left:5px;} </style>
    <script type="text/javascript"> window.onload=function(){ //                      var ps = document.getElementsByTagName("p"); var uls = document.getElementsByTagName("ul"); //                         for(var i = 0, n = ps.length; i <n; i += 1){ ps[i].id = i; ps[i].onclick = function(){ for(var j = 0; j < n ; j += 1){ uls[j].style.display = "none"; } uls[this.id].style.display = "block"; } //              ，             } //      ，           ，              } </script>
</head>
<body>
    <div class="menu" id="menu">
        <div>
            <p>Web  </p>
            <ul style="display:block">
                <li>JavaScript</li>
                <li>DIV+CSS</li>
                <li>jQuery</li>
            </ul>
        </div>
        <div>
            <p>    </p>
            <ul>
                <li>PHP</li>
                <li>ASP.net</li>
                <li>JSP</li>
            </ul>
        </div>
        <div>
            <p>    </p>
            <ul>
                <li>Extjs</li>
                <li>Esspress</li>
                <li>YUI</li>
            </ul>
        </div>
    </div>
</body>
</html>

インスタンス効果:

javascript if条件判断