（7）展开闭合列表：布局overflow在列表中应用

来源：互联网发布：音频切割软件一刀切编辑：程序博客网时间：2024/06/16 16:52
<title>无标题文档</title><style type="text/css">     dl dd/*关联选择器*/     {         margin:0px;     }     dl{         height:16px;         overflow:hidden;/*只保留“显示条目一”，其他隐藏*/     }     .open     {        overflow:visible;      }     .close     {         overflow:hidden;     }</style></head><body>  <script type="text/javascript">   /*  var flag=true;     function list()     {         //获取要处理的节点，dl         var node=document.getElementsByTagName("dl")[0];          if(flag)          {            node.style.overflow="visible";            flag=false;          }          else          {              node.style.overflow="hidden";              flag=true;          }     }     */     function list2()     {         //1,获取dl节点         var node=document.getElementsByTagName("dl")[0];         //2，设置dl的className属性值,通过判断属性值来切换          if(node.className=="open")              node.className="close";          else              node.className="open";     }     //list1,2都是一个列表的情况，但是实际开发，通常一个网页中含有多个列表     function list3(index)     {         //这种方式中列表的位置不能调换，否则会出现展开错误列表的情况.因为Dom解析是按照列表从前到后解析的         //不安全         var node=document.getElementsByTagName("dl")[index];         if(node.className=="open")              node.className="close";          else              node.className="open";     }     function list4(node)     {         //alert(node.nodeName);//得到DT         var fnode=node.parentNode;          if(fnode.className=="open")              fnode.className="close";          else              fnode.className="open";     }    //在多个列表下，一次只需要展开一个列表，关闭其他开启的列表    /*思路：1，获取所有dl节点           2，遍历这些节点，只对当前的dl进行展开或者闭合操作，其他节点，都进行闭合操作    */    function list5(node)    {        var oDlnode=node.parentNode;//获取当前的dl节点        var collDlNodes=document.getElementsByTagName("dl");        for(var i=0;i<collDlNodes.length;i++)        {            if(collDlNodes[i]==oDlnode)            {                if(oDlnode.className=="open")                    oDlnode.className="close";                else                    oDlnode.className="open";            }           else           {            collDlNodes[i].className="close";           }        }    }  </script>   <dl class="close">       <dt onclick="list5(this)">显示条目一</dt>       <dd>展示列表内容1</dd>       <dd>展示列表内容1</dd>       <dd>展示列表内容1</dd>   </dl>   <dl class="close">       <dt onclick="list5(this)">显示条目二</dt>       <dd>展示列表内容2</dd>       <dd>展示列表内容2</dd>       <dd>展示列表内容2</dd>   </dl>    <dl class="close">       <dt onclick="list5(this)">显示条目三</dt>       <dd>展示列表内容3</dd>       <dd>展示列表内容3</dd>       <dd>展示列表内容3</dd>   </dl></body></html>
阅读全文
0 0