JavaScript语言基础---(十五)应用编程练习--制作二级下拉菜单

来源：互联网发布：淘宝服装店铺简介范文编辑：程序博客网时间：2024/06/05 19:07
思路：我们通过onmouseover以及onmouseout方法来进行li（菜单栏项）标签上的下拉控制。并通过从方法修改li下的ul（每一个菜单项的子项块）的display进行显示和隐藏
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>    <head>        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">        <title>DHTML技术综合演示---示例:下拉风格的菜单条</title>        <style type="text/css">            #newslist{                list-style:none;            }            #newslist ul{                list-style:none;                margin:0px;                padding:0px;            }            #newslist li{                float:left;                width:180px;            }            #newslist li a{                display:block;                color:#ffffff;                background-color:#0066cc;                text-decoration:none;                line-height:25px;                text-align:center;            }            #newslist li a:hover{                color:#ff66cc;                background-color:#999999;            }            #newslist li a{                background-color:#0099ff;            }        </style>        <script type="text/javascript">            function list(oLiNode){                var oUlNode = oLiNode.getElementsByTagName("ul")[0];                //alert(oUlNode.nodeName);                //oUlNode.style.display = oUlNode.style.display=="block"? "none":"block";                with(oUlNode.style){                    display = display=="block"? "none":"block";                }            }        </script>    </head>    <body>  <div id="newsid">    <ul id="newslist">        <li onmouseover="list(this)"; onmouseout="list(this)" >            <a href="javascript:void(0)">城院新闻</a>            <ul style="display:none;">                <li><a href="${new1Url}">校园新闻内容摘要</a></li>                <li><a href="http://www.hncu.net/">校园新闻内容摘要</a></li>                <li><a href="http://www.hncu.net/">校园新闻内容摘要</a></li>                <li><a href="http://www.hncu.net/">校园新闻内容摘要</a></li>            </ul>        </li>        <li onmouseover="list(this)"; onmouseout="list(this)" >            <a href="javascript:void(0)">大学新闻</a>            <ul style="display:none;">                <li><a href="http://www.hncu.net/">大学新闻内容摘要</a></li>                <li><a href="http://www.hncu.net/">大学新闻内容摘要</a></li>                <li><a href="http://www.hncu.net/">大学新闻内容摘要</a></li>                <li><a href="http://www.hncu.net/">大学新闻内容摘要</a></li>            </ul>        </li>        <li onmouseover="list(this)"; onmouseout="list(this)" >            <a href="javascript:void(0)">社会新闻</a>            <ul style="display:none;">                <li><a href="http://www.hncu.net/">社会新闻内容摘要</a></li>                <li><a href="http://www.hncu.net/">社会新闻内容摘要</a></li>                <li><a href="http://www.hncu.net/">社会新闻内容摘要</a></li>                <li><a href="http://www.hncu.net/">社会新闻内容摘要</a></li>            </ul>        </li>        <li onmouseover="list(this)"; onmouseout="list(this)" >            <a href="javascript:void(0)">就业新闻</a>            <ul style="display:none;">                <li><a href="http://www.hncu.net/">就业新闻内容摘要</a></li>                <li><a href="http://www.hncu.net/">就业新闻内容摘要</a></li>                <li><a href="http://www.hncu.net/">就业新闻内容摘要</a></li>                <li><a href="http://www.hncu.net/">就业新闻内容摘要</a></li>            </ul>        </li>    </ul></div>    </body></html>
0 0