style为空或不是对象

原因：        <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
            <a href="edit.aspx">管理联系人    </a>
        </li>
中没有<ul>try:    <script type="text/javascript">
        function displaySubMenu(li) {
            var subMenu = li.getElementsByTagName("ul")[0];
            if (subMenu) subMenu.style.display = "block";//-------------------------这里出错
        }
        function hideSubMenu(li) {
            var subMenu = li.getElementsByTagName("ul")[0];
            if (subMenu) subMenu.style.display = "none";
        }
    </script>

接上
  function displaySubMenu(li) {            var subMenu = document.getElementById('test');
            subMenu.style.display = "block";//-------------------------这里出错
        }
        function hideSubMenu(li) {
            var subMenu = document.getElementById('test');
if(subMenu)
{
subMenu.style.display = "none";
}
        }
    </script>

这个是因为找不到ul导致的错误,在触发事件的时候，判断下是否存在这个元素
下面的代码搞定<!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>
</head>
<body>
<style type="text/css">
        * {
            padding:0;
            margin:0;
        }
        body {
            font-family:verdana, sans-serif;
            font-size:small;
        }
        li ul {
            list-style-type:none;
        }
        #navigation {
            margin:20px;
        }
        li {
            float:left;
            text-align:center;
            position:relative;
        }
        li a:link, #navigation li a:visited {
            display:block;
            text-decoration:none;
            color:#000;
            width:150px;
            height:40px;
            line-height:40px;
            border:1px solid #fff;
            border-width:1px 1px 0 0;
            background:#c5dbf2;
            padding-left:10px;
        }
        li a:hover {
            color:#fff;
            background:#2687eb;
        }
        li ul li a:hover {
            color:#fff;
            background:#6b839c;
        }
        li ul {
            display:none;
            position:absolute;
            top:40px;
            left:0;
            margin-top:1px;
            width:120px;
        }
         li ul li ul {
            display:none;
            position:absolute;
            top:0px;
            left:130px;
            margin-top:0;
            margin-left:1px;
            width:120px;
        }
    </style>
    <script type="text/javascript">
        function displaySubMenu(li) {
            var subMenu = li.getElementsByTagName("ul");
if(subMenu.length>0)
{
subMenu[0].style.display = "block";
}
}
        function hideSubMenu(li) {
            var subMenu = li.getElementsByTagName("ul");
           if(subMenu.length>0)
{
subMenu[0].style.display = "none";
}
        }
    </script>
<ul id="navigation">
        <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
            <a href="edit.aspx">管理联系人    </a>
        </li>
        <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
            <a href="#">订阅事件        </a>
             
            <ul>
                <li><a href="editbuild.aspx">订阅版本质量更改事件</a></li>
                <li><a href="editbuildcompletion.aspx">订阅版本完成事件</a></li>
            </ul>
        </li>

    </ul></body>
</html>

因为你第一个菜单没有子菜单，当鼠标移上去，subMenu为空，就出错了。
<html>
<style type="text/css">
        * {
            padding:0;
            margin:0;
        }
        body {
            font-family:verdana, sans-serif;
            font-size:small;
        }
        li ul {
            list-style-type:none;
        }
        #navigation {
            margin:20px;
        }
        li {
            float:left;
            text-align:center;
            position:relative;
        }
        li a:link, #navigation li a:visited {
            display:block;
            text-decoration:none;
            color:#000;
            width:150px;
            height:40px;
            line-height:40px;
            border:1px solid #fff;
            border-width:1px 1px 0 0;
            background:#c5dbf2;
            padding-left:10px;
        }
        li a:hover {
            color:#fff;
            background:#2687eb;
        }
        li ul li a:hover {
            color:#fff;
            background:#6b839c;
        }
        li ul {
            display:none;
            position:absolute;
            top:40px;
            left:0;
            margin-top:1px;
            width:120px;
        }
         li ul li ul {
            display:none;
            position:absolute;
            top:0px;
            left:130px;
            margin-top:0;
            margin-left:1px;
            width:120px;
        }
    </style>
    <script type="text/javascript">
        function displaySubMenu(li) {
            var subMenu = li.getElementsByTagName("ul")[0];
            if(subMenu) subMenu.style.display = "block"; //-------------------------这里出错
        }
        function hideSubMenu(li) {
            var subMenu = li.getElementsByTagName("ul")[0];
            if(subMenu) subMenu.style.display = "none";
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
<ul id="navigation">
        <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
            <a href="edit.aspx">管理联系人    </a>
        </li>
        <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
            <a href="#">订阅事件        </a>
             
            <ul>
                <li><a href="editbuild.aspx">订阅版本质量更改事件</a></li>
                <li><a href="editbuildcompletion.aspx">订阅版本完成事件</a></li>
            </ul>
        </li>

    </ul>
    </form>
</body>
</html>

调试易

style为空或不是对象

解决方案 »