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

最新推荐文章于 2022-03-28 23:41:05 发布

FixedStarHaHa

最新推荐文章于 2022-03-28 23:41:05 发布

阅读量361

点赞数 1

分类专栏： DOM 文章标签：布局文档应用

本文链接：https://blog.csdn.net/jiangshangchunjiezi/article/details/76786745

版权

DOM 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

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