js实现侧边导航栏展开和折叠

效果:左侧导航栏,点击展开,显示子菜单。再次点击,菜单折叠。
代码


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>柠檬酒店title>
<style>
/*设置导航每个主菜单的样式*/
.main_nav{
    display:block;
    width:200px;
    padding:10px;   
    font-weight:bold;   
    background-color:#BADFF2;
}
li{list-style:none;}
#globalNav {
    position:absolute;
    top:3px;
    left:2px;
}
/*导航中每个子菜单的样式*/
#globalNav ul li a{
    margin:auto 10px;
    display:block;
    width:140px;    
    color:#fff;
    font-weight:bold;
    text-decoration:none;
}
#globalNav li ul li a{
    background:#6DBBE1;
}
#globalNav li ul li a:hover{
    background:#BCF2F0;--鼠标经过的颜色-->   
}
style>
<script type="text/javascript" >
function initTree(t) {
    var tree=document.getElementById(t);//生成树
    tree.style.display="none";//设置样式为隐藏形式,不显示
    var lis=tree.getElementsByTagName("li");
    for(var i=0;i//取出主要的导航栏
        lis[i].id="li"+i;
        var uls=lis[i].getElementsByTagName("ul"); //子导航栏
        if(uls.length!=0) {
            uls[0].id="ul"+i;
            uls[0].style.display="none";
            var as=lis[i].getElementsByTagName("a"); //子导航栏的内容
            as[0].id="a"+i;
            as[0].className="folder";
            as[0].href="#this";
            as[0].tget=uls[0];
            as[0].onclick=function() {
                openTag(this,this.tget);
            }
        }
    }
    tree.style.display="block";
}
function openTag(a,t) {
    if(t.style.display=="block") { //点击一些展开,再点击一下折叠
        t.style.display="none";
        a.className="folder";
    } else {
        t.style.display="block";
        a.className="";
    }
}
window.onload=function() {
    initTree("globalNav");
}
script>
head>
<body id="index">
<ul id="globalNav">
  <li class="main_nav"><a href="#">房间信息a>
    <ul>
      <li><a href="nullroom.php" target="mainFrame">空房a>li>
      <li><a href="room.php" target="mainFrame">所有房间a>li>
      <li><a href="orderroom.php" target="mainFrame">被订房间a>li>
      <li><a href="register/room.html" target="mainFrame">录入房间信息a>li>
    ul>
  li>
  <li class="main_nav"><a href="#">房客信息a>
    <ul>
      <li><a href="register/custom.html" target="mainFrame">录入房客信息a>li>
      <li><a href="custom_info.php" target="mainFrame">客史档案a>li>
    ul>
  li>
  <li class="main_nav"><a href="#">订单a>
    <ul>
      <li><a href="register/order.html" target="mainFrame">录入订单信息a>li>
      <li><a href="order.php" target="mainFrame">查看订单a>li>
    ul>
  li>
  <li class="main_nav"><a href="#">会员a>
    <ul>
      <li><a href="register/member.html" target="mainFrame">录入会员信息a>li>
      <li><a href="member.php" target="mainFrame">查看会员信息a>li>
    ul>
  li>
  <li class="main_nav"><a href="#">财务a>
    <ul>
      <li><a href="register/cash.html" target="mainFrame">录入财务信息a>li>
      <li><a href="cash.php" target="mainFrame">查看财务信息 a>li>
    ul>
  li>
  <li class="main_nav"><a href="login/login.html"  target="_parent">退出a>li>
ul>
body>
html>

你可能感兴趣的:(JavaScript,导航,左侧导航-展开)