Maison > interface Web > js tutoriel > JavaScript implémente la disposition du formulaire de menu rétractable

JavaScript implémente la disposition du formulaire de menu rétractable

怪我咯
Libérer: 2017-03-29 15:33:02
original
1299 Les gens l'ont consulté

Deux façons d'obtenir des nœuds :

1. Via un événementObject's srcElementattribut;

2. Utilisez ceci pour transmettre l'objet source event comme suit :


<html>
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  <title>收缩菜单 ・ 表单布局</title>
  <script type="text/javascript">
    function list(dtNode){
      // var dtNode = event.srcElement;
      var dlNode = dtNode.parentNode;
      // alert(dtNode.nodeName+"---"+dlNode.nodeName);
      var dlNodes = document.getElementsByTagName("dl");
      // alert(dlNodes.length);
      for(var i=0; i<dlNodes.length; i++){
        if(dlNodes[i] == dlNode){
          /*判断当前标题是展开还是关闭状态,默认关闭,先执行else语句*/
          if(dlNode.className == "open"){
            dlNode.className = "close";
          }
          else{
            dlNode.className = "open";
          }
        }
        else{
          dlNodes[i].className = "close";
        }
      }
    }
  </script>
  <style type="text/css">
    dl{
      overflow: hidden;
      height: 18px;
    }
    .open{
      overflow: visible;
    }
    .close{
      overflow: hidden;
    }
  </style>
</head>
  <!-- 获取节点的两种方式:
  1、通过event对象的srcElement属性;
  2、通过事件源对象用this传入
 -->
<body>
  <!-- 事件源是dt,但是操作的是dl -->
  <dl>
    <dt onclick="list(this)">今天天气好晴朗</dt>
    <dd>今天天气好晴朗</dd>
    <dd>今天天气好晴朗</dd>
    <dd>今天天气好晴朗</dd>
    <dd>今天天气好晴朗</dd>
    <dd>今天天气好晴朗</dd>
  </dl>
  <dl>
    <dt onclick="list(this)">今天天气好晴朗</dt>
    <dd>今天天气好晴朗</dd>
    <dd>今天天气好晴朗</dd>
    <dd>今天天气好晴朗</dd>
    <dd>今天天气好晴朗</dd>
    <dd>今天天气好晴朗</dd>
  </dl>
  <dl>
    <dt onclick="list(this)">今天天气好晴朗</dt>
    <dd>今天天气好晴朗</dd>
    <dd>今天天气好晴朗</dd>
    <dd>今天天气好晴朗</dd>
    <dd>今天天气好晴朗</dd>
    <dd>今天天气好晴朗</dd>
  </dl>
  <dl>
    <dt onclick="list(this)">今天天气好晴朗</dt>
    <dd>今天天气好晴朗</dd>
    <dd>今天天气好晴朗</dd>
    <dd>今天天气好晴朗</dd>
    <dd>今天天气好晴朗</dd>
    <dd>今天天气好晴朗</dd>
  </dl>
  <dl>
    <dt onclick="list(this)">今天天气好晴朗</dt>
    <dd>今天天气好晴朗</dd>
    <dd>今天天气好晴朗</dd>
    <dd>今天天气好晴朗</dd>
    <dd>今天天气好晴朗</dd>
    <dd>今天天气好晴朗</dd>
  </dl>
  <dl>
    <dt onclick="list(this)">今天天气好晴朗</dt>
    <dd>今天天气好晴朗</dd>
    <dd>今天天气好晴朗</dd>
    <dd>今天天气好晴朗</dd>
    <dd>今天天气好晴朗</dd>
    <dd>今天天气好晴朗</dd>
  </dl>
  <dl>
    <dt onclick="list(this)">今天天气好晴朗</dt>
    <dd>今天天气好晴朗</dd>
    <dd>今天天气好晴朗</dd>
    <dd>今天天气好晴朗</dd>
    <dd>今天天气好晴朗</dd>
    <dd>今天天气好晴朗</dd>
  </dl>
</body>
</html>
Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal