首页 > 代码库 > 来个大牛帮忙看下这段代码。关于css和html的

来个大牛帮忙看下这段代码。关于css和html的

2024-09-24 08:42:12   216人阅读

问题是：原本要实现两级菜单的伸缩，结果伸缩不了……

代码如下：

/*CSS部分*/
#navigation > ul{
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}
#navigation > ul > li {
    border-bottom: 1px solid #ED9F9F;
}
#navigation > ul > li > a {
    display: block;                     /*区块显示*/
    padding: 5px 5px 5px 0.5em;
    text-decoration: none;
    border-left: 12px solid #711515;/*左边的粗红边*/
    border-right: 1px solid #711515;/*右侧阴影*/
}
#navigation > ul > li > a:link,#navigation > ul > li > a:visited{
    background-color: #c11136;
    color: #FFFFFF;
                               }
#navigation > ul > li > a:hover{ /*鼠标经过时*/
    background-color: #990020; /*改变背景色*/
    color: #ffff00;             /*改变文字颜色*/
}

/*二级菜单*/
#navigation u li ul{
    list-style-type: none;
    margin: 0px;
    padding: 0px 0px 0px 0px;
}
#navigation ul li ul li{
    border-top: 1px solid #ED9F9F;
}
#navigation ul li ul li a{
    display: block;
    padding: 3px 3px 3px 0.5em;
    text-decoration: none;
    border-left:28px solid #a71f1f;
    border-right: 1px solid #711515;
}
#navigation ul li ul li a:link,#navigation ul li ul li a:visited{
    background-color: #e85070;
    color: #FFFFFF;
}
#navigation ul li ul li a:hover{
    background-color: #c2425d;
    color: #ffff00;
}
/*隐藏子菜单*/
#navigation ul li ul.myHide{
    display: none;
}
/*显示子菜单*/
#navigation ul li ul.myShow{
    display: block;
}
/*html部分*/
<!DOCTYPE html>
<html>
<head>
    <title>伸缩的两级菜单</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="http://www.mamicode.com/ssdljcd.css">
    <script language="JavaScript">
        window.onload = function () {
            var oU1 = document.getElementById("listUL");
            var aLi = oU1.childNodes;
            var oA;
            for(var i=0;i<aLi;i++){
                //如果子元素为Li，且这个li有子菜单ul
                if(aLi[i].tagName == "LI" && aLi[i].getElementsByTagName("ul").length){
                    oA = aLi[i].firstChild;        //找到超链接
                    oA.onclick = change;        //动态添加单机函数
                }
            }
        }
        function change() {
            //通过父元素li，找到兄弟元素li
            var oSecondDiv = this.parentNode.getElementsByTagName("ul")[0];
            //CSS交替更换来实现显示、隐藏
            if(oSecondDiv.className =="myHide")
                oSecondDiv.className = "myShow";
            else
                oSecondDiv.className = "myHide";
        }
    </script>
</head>
<body>
<div id="navigation">
    <ul id="listUL">
        <li><a href="">Home</a></li>
        <li><a href="">News</a>
        <ul class="myHide">
            <li><a href="">LastestNews</a></li>
            <li><a href="">All News</a></li>
        </ul>
        </li>
        <li><a href="">Sports</a>
            <ul class="myHide">
                <li><a href="">Basketball</a></li>
                <li><a href="">Football</a></li>
                <li><a href="">Volleyball</a></li>
            </ul>
        </li>
        <li><a href="">Weather</a>
        <ul class="myHide">
            <li><a href="">Today‘s Weather</a></li>
            <li><a href="">Forecast</a></li>
        </ul>
        </li>
        <li><a href="">Contact me</a></li>
    </ul>
    
</div>
</body>
</html>

这是我从书上看到的一个例子，写的时候发现，貌似有问题诶，然后就来向大家求助了。

来个大牛帮忙看下这段代码。关于css和html的


联系
我们