display：实现菜单栏目的展开合并

2017-08-07 16:33 0 696 来源：海墨

这里给大家分享的是用样式display实现菜单栏目的展开合并：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<style type="text/css">
/*对表格中的ul进行样式定义1，取出无序列表的样式（无序列表自带样式缩进或者文字前的圆圈）2，去掉外边距*/
  table tr td ul {
      list-style:none;
      margin:0px;
      background-color:#FF0;
      display:none;/*此元素不会显示*/
      border:#FC3 1px solid;
      padding:0px;
  }
/*对表格框线进行定义以及单元格的框线进行定义*/
  table {
      width:80px;
  }
  table td {
      border:#000 1px solid;
      background-color:#eee;
      padding:5px;
      text-align: center;
  }
  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:#000;
      text-decoration:none;

  }
  .open
  {
      display:block;/*块对象的默认值。将对象强制作为块对象呈递，为对象之后添加新行*/
  }
  .open li {
    padding: 5px;
  }
  .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>

效果如下：

合并的效果图

点击水果展开的效果图