（8）布局display应用：好友菜单

来源：互联网发布：认字卡片软件编辑：程序博客网时间：2024/05/17 01:05

在（7）中overflow布局：可以选择隐藏数据，但是当一个条目打开后，并不能将之后的条目自动在此条目内容的下面，而且可能导致覆盖条目的问题，因为该问题的存在，所以可以用display实现条目的打开时的自动伸缩

<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css">/*对表格中的ul进行样式定义1，取出无序列表的样式（无序列表自带样式缩进或者文字前的圆圈）2，去掉外边距*/  table tr td ul  {      list-style:none;      margin:0px;      background-color:#F0F;      display:none;/*此元素不会显示*/      border:#FC3 1px solid;      padding:0px;  }/*对表格框线进行定义以及单元格的框线进行定义*/  table  {      border:#0FC 1px solid;      width:80px;  }  table td  {      border:#000 1px solid;      background-color:#9F3;      padding:0px;  }  table tr td a  {      color:#600;      text-decoration:none;/*去掉下划线*/  }  table tr td a:hover  {      color:#CFF;    }  table tr td a:link,table tr td a:visited  {      color:#F00;      text-decoration:none;  }  .open  {      display:block;/*块对象的默认值。将对象强制作为块对象呈递，为对象之后添加新行*/  }  .close  {      display:none;/*隐藏对象。与 visibility 属性的hidden值不同，其不为被隐藏的对象保留其物理空间*/  }</style></head><body>    <script type="text/javascript">    //事件源：超链接  处理对象：ul  处理方式：open，close        function list(aNode)        {            //根据事件源a获取其下一个兄弟ul            var ulNode=aNode.nextSibling.nextSibling;            //alert(ulNode.nodeName);            //遍历所有的ul节点，要通过table            var tabNode=document.getElementById("goodlist");            //alert(tabNode.nodeName);            var collUlNodes=tabNode.getElementsByTagName("ul")//容器型标签,都含有根据标签名获取节点的方法            for(var x=0;x<collUlNodes.length;x++)            {                if(collUlNodes[x]==ulNode)                {                    if(ulNode.className=="open")                    {                        ulNode.className="close";                    }                    else                    {                        ulNode.className="open";                    }                }                else                {                    collUlNodes[x].className="close";                }            }        }    </script> <table id="goodlist">    <tr>        <td>            <a href="javascript:void(0)" onclick="list(this)"> 好友菜单</a>            <ul class="close">               <li>一个好友</li>               <li>一个好友</li>               <li>一个好友</li>               <li>一个好友</li>             </ul>         </td>     </tr>     <tr>        <td>            <a href="javascript:void(0)"onclick="list(this)" > 好友菜单</a>            <ul class="close">               <li>一个好友</li>               <li>一个好友</li>               <li>一个好友</li>               <li>一个好友</li>             </ul>         </td>     </tr>     <tr>        <td>            <a href="javascript:void(0)"onclick="list(this)" > 好友菜单</a>            <ul class="close">               <li>一个好友</li>               <li>一个好友</li>               <li>一个好友</li>               <li>一个好友</li>             </ul>         </td>     </tr></body></html>

阅读全文

0 0