树状菜单

来源：互联网发布：unix 网络编程源代码编辑：程序博客网时间：2024/05/24 05:59

树状菜单

1、html代码

<div class="treeview">    <ul id="browser" class="treeview">        <li>        <div class="folderSelected">            <div class='foldarea foldarea-collapsable'></div>            <span class="folder folder-opened"><a>中国</a></span>            </div>            <ul>                <li>                <div class="folderSelected">                    <div class='foldarea foldarea-collapsable'></div>                    <span class="folder folder-opened">广东</span>                    </div>                    <ul id="">                        <li class="folderSelected"><span class="file">深圳</span></li>                        <li class="last folderSelected"><span class="file"><a>广州</a></span></li>                    </ul>                </li>            </ul>        </li>    </ul></div>

2、控制菜单折叠代码

<script type="text/javascript">  $(document).ready(function(){      var folders = $('.folder');      var foldareas = $('.foldarea');      //鼠标移入文件夹节点上，节点文字变色，鼠标指针改变       folders.hover(              function(){                  $(this).addClass('hover');              },              function(){                  $(this).removeClass('hover');              }      );      var doFold = function(){          var ul = $('ul',this.parentNode.parentNode)[0];          var foldarea = $('.foldarea',this.parentNode)[0];          var folder = $('.folder',this.parentNode)[0];          if(!ul){              return;          }          var ulDisplay =   $(ul).css('display');          if(ulDisplay==='none'){              //展开列表              $(ul).css('display','block');              //显示展开时的文件夹图标              $(folder).removeClass('folder-closed');              $(folder).addClass('folder-opened');              //展开时显示可折叠图标              $(foldarea).removeClass('foldarea-expandable');              $(foldarea).addClass('foldarea-collapsable');          }else{              //通过隐藏来实现折叠列表              $(ul).css('display','none');              //显示折叠时的文件夹图标              $(folder).removeClass('folder-opened');              $(folder).addClass('folder-closed');              //折叠时显示可展开图标              $(foldarea).removeClass('foldarea-collapsable');              $(foldarea).addClass('foldarea-expandable');          }      };      $(".folderSelected").click(function() {   $(".folderSelected").removeClass('selected');  // 删除其他兄弟元素的样式          $(this).addClass('selected');                            // 添加当前元素的样式      });      //将文件夹节点下的列表折叠或展开      folders.click(doFold);      foldareas.click(doFold);       });  </script>

3、css代码

 <style type="text/css"> .treeview, .treeview ul{                list-style: none;                padding: 0px;                margin: 0px;      }      .treeview ul{          background-color: white;          margin-top: 4px;          margin-left: 10px;      } .treeview a:hover{ cursor: pointer; }      .treeview li{          margin:0px;          padding:3px 0px 3px 16px;      }        .treeview .foldarea{                height: 16px;                width: 16px;                float: left;                margin-left: -10px;                 margin-top: 5px;            }         .treeview  .foldarea-expandable{           background: url(images/SimpleTree/st_icon.png);           background-repeat:no-repeat;                   } .treeview  .foldarea-expandable:hover{ cursor: pointer; color: red; } .treeview .foldarea-collapsable{ cursor: pointer; }       .treeview .foldarea-collapsable{           background: url(images/SimpleTree/st_icon_open.png);            background-repeat:no-repeat;        }        .treeview .folder{                padding: 1px 0px 1px 20px;            }                          .treeview .folder-opened{                background: url(images/SimpleTree/st_folder_open.gif) 0 0 no-repeat;            }            .treeview .folder-closed{                background: url(images/SimpleTree/st_folder.gif) 0 0 no-repeat;            }              .treeview .file{                background: url(images/SimpleTree/st_node.gif) 0 0 no-repeat;                padding: 0px 0px 1px 16px;            }              .treeview li.last {                background-position: 0 -1766px;            }             .hover{                cursor: pointer;            }            .selected{font-weight:bold; background: #ededf5; color:#fff;}            .folderSelected:hover{            background:#ededf5;            }  </style>

0 0