网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的考试资料：

　

标题 JavaScript+CSS实现的可折叠二级菜单实例
内容
    本文实例讲述了JavaScript+CSS实现的可折叠二级菜单。分享给大家供大家参考，具体如下：
    .aspx文件：
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="NavigateMenu.aspx.cs" Inherits="NavigateMenu" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
    <title>无标题页</title>
    <script type="text/javascript" src="JScript.js" ></script>
    <style type="text/css">
    *{
     margin: 0px;
     padding: 0px;
     border:0px;
    }
    #nav{
     width: 200px;
     margin: 0px;
     padding: 0px;
     font-size: 14px;
     line-height: 30px;
    }
    #nav li{
     width: 180px;
     padding-left: 20px;
     padding-bottom: 1px;
     list-style-image: none;
     list-style-type: none;
     background-color: #FFFFFF;
     float: left;
    }
    #nav a{
     padding-left: 20px;
     background-color: #BFBFBF;
     display: block;
     text-decoration: none;
    }
    #nav a:hover {
     background-color: #FF9175;
    }
    #nav li ul{
     padding-top: 1px;
     list-style-image: none;
     list-style-type: none;
    }
    #nav li li{
     padding-left: 0px;
    }
    #nav ul a{
     background-color: #EBEBEB;
    }
    .cx {
     display:none;
     visibility:hidden;
    }
    .ex {
     display:inherit;
     visibility:inherit;
    }
    </style>
    <script type="text/javascript" >
    window.onload=function()
    {
     statUp();
    }
    </script>
    </head>
    <body>
    <form id="form1" runat="server">
    <div id="Parent">
    <ul id="nav">
    <li><a href="javascript:void(0);" onclick="doMenu(this)">菜单1</a>
     <ul>
     <li><a href="javascript:void(0);">菜单1_1</a></li>
     <li><a href="javascript:void(0);">菜单1_2</a></li>
     </ul>
    </li>
    <li><a href="javascript:void(0);" onclick="doMenu(this)">菜单2</a>
     <ul>
     <li><a href="javascript:void(0);">菜单2_1</a></li>
     <li><a href="javascript:void(0);">菜单2_2</a></li>
     </ul>
    </li>
    <li><a href="javascript:void(0);" onclick="doMenu(this)">菜单3</a>
     <ul>
     <li><a href="javascript:void(0);">菜单3_1</a></li>
     <li><a href="javascript:void(0);">菜单3_2</a></li>
     </ul>
    </li>
    </ul>
    </div>
    </form>
    </body>
    </html>
    js文件：
    function doMenu(obj){
     var items=obj.parentNode.getElementsByTagName("ul");
     var itmUl;
     if(items.length>0){
     itmUl=items[0];
     }
     if(itmUl.className!="ex"){
     cxAll();
     itmUl.className="ex";
     }else{
     itmUl.className="cx";
     }
    }
    function statUp(){
     cxAll();
    }
    function cxAll(){
     var ulDom=document.getElementById("nav");
     var items=ulDom.getElementsByTagName("ul");
     for (var i=0;i<items.length;i++)
     {
     items[i].className="cx";
     }
    }
    在这里需要注意的是延迟加载的问题，由于页面加载时需要执行预处理操作statUp()方法，js单独写成一个文件或 js写在<head>节点中时，需要使用window.onload=function(){执行语句;} 延迟加载，不然引用DOM中对象时，会出现缺少对象 错误提示。
    别一种解决方法，直接将所有javaScript 写在</html>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>菜单</title>
    <script type="text/javascript" src="Untitled-3.js"></script>
    <style>
    *{
     margin: 0px;
     padding: 0px;
     border:0px;
    }
    #nav{
     width: 200px;
     margin: 0px;
     padding: 0px;
     font-size: 14px;
     line-height: 30px;
    }
    #nav li{
     width: 180px;
     padding-left: 20px;
     padding-bottom: 1px;
     list-style-image: none;
     list-style-type: none;
     background-color: #FFFFFF;
     float: left;
    }
    #nav a{
     padding-left: 20px;
     background-color: #BFBFBF;
     display: block;
     text-decoration: none;
    }
    #nav a:hover {
     background-color: #FF9175;
    }
    #nav li ul{
     padding-top: 1px;
     list-style-image: none;
     list-style-type: none;
    }
    #nav li li{
     padding-left: 0px;
    }
    #nav ul a{
     background-color: #EBEBEB;
    }
    .cx {
     display:none;
     visibility:hidden;
    }
    .ex {
     display:inherit;
     visibility:inherit;
    }
    </style>
    </head>
    <body>
    <div id="Parent">
    <ul id="nav">
    <li><a href="javascript:void(0);" onclick="doMenu(this)">菜单1</a>
     <ul>
     <li><a href="javascript:void(0);">菜单1_1</a></li>
     <li><a href="javascript:void(0);">菜单1_2</a></li>
     </ul>
    </li>
    <li><a href="javascript:void(0);" onclick="doMenu(this)">菜单2</a>
     <ul>
     <li><a href="javascript:void(0);">菜单2_1</a></li>
     <li><a href="javascript:void(0);">菜单2_2</a></li>
     </ul>
    </li>
    <li><a href="javascript:void(0);" onclick="doMenu(this)">菜单3</a>
     <ul>
     <li><a href="javascript:void(0);">菜单3_1</a></li>
     <li><a href="javascript:void(0);">菜单3_2</a></li>
     </ul>
    </li>
    </ul>
    </div>
    </body>
    </html>
    <script type="text/javascript">
    function doMenu(obj){
     var items=obj.parentNode.getElementsByTagName("ul");
     var itmUl;
     if(items.length>0){
     itmUl=items[0];
     }
     if(itmUl.className!="ex"){
     cxAll();
     itmUl.className="ex";
     }else{
     itmUl.className="cx";
     }
    }
    function statUp(){
     cxAll();
     //var ulDom=document.getElementById("nav");
     //var items=ulDom.getElementsByTagName("ul");
    }
    function cxAll(){
     var ulDom=document.getElementById("nav");
     var items=ulDom.getElementsByTagName("ul");
     for (var i=0;i<items.length;i++)
     {
     items[i].className="cx";
     }
     }
    statUp();
    </script>
    希望本文所述对大家JavaScript程序设计有所帮助。
随便看

　

在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。

　

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间：2025/5/19 9:51:01