Maison > Article > interface Web > Implémentation de la barre de menus rétractable JavaScript Compétences code_javascript

Implémentation de la barre de menus rétractable JavaScript Compétences code_javascript

WBOYoriginal: 2016-05-16 15:32:441388parcourir

Cet article implémente la méthode permettant de déterminer si le menu sous le titre est affiché lorsqu'on clique sur le titre. S'il est affiché, il sera masqué. S'il est masqué, il sera affiché. Le code spécifique est le suivant

<!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>

Exemple d'effet :

Ce qui précède est le code d'implémentation de la barre de menus télescopique JavaScript partagé avec vous. J'espère qu'il vous sera utile pour votre apprentissage.

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Implémentation des compétences javascript d'effet de glissement d'image_javascriptArticle suivant：Implémentation des compétences javascript d'effet de glissement d'image_javascript

Articles Liés

Voir plus