关于对象不支持此属性或方法的问题

<!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=utf-8" />
<script type="text/javascript"></script>
<title>网页特效大全:用JS做的下拉菜单 滑动门效果</title>
<style type="text/css">
div,ul,li,h3{margin:0px;padding:0px;}
ul,li{list-style-type:none;}
div{cursor:pointer;}
#pig{width:100px;height:20px;background:green;}
#father{height:200px;width:100px;}
#father ul li h3{width:100px;height:25px;background:red;}
#father div{background:black;height0px;overflow:hidden;}
</style>
</head>
<body>
<div id="father">
<ul>
<li onclick="boss(0)"><h3>111</h3><div>啊啊</div></li>
<li onclick="boss(1)"><h3>222</h3><div>啊啊</div></li>
<li onclick="boss(2)"><h3>333</h3><div>啊啊</div></li>
<li onclick="boss(3)"><h3>444</h3><div>啊啊</div></li>
</ul>
</div>
<script type="text/javascript">
var time3 = null;
var time4 = null;
var b =25;
         var d = 0;
var a = document.getElementById("father").getElementsByTagName("div");
function boss(h){
for (i=0;i<a.length ;i++ )
{
a[i].close();
}
a[h].open();
}function close(){
if (d>0)
{
d=d-5;
this.style.height = d+"px";
}
if (time4){
clearTimeout(time4);
time3 = setTimeout(close,10)
}
}function open(){
if (d<100)
{
d=d+5;
this.style.height = d+"px";
}
if (time3)
{
clearTimeout(time3);
time4 = setTimeout(open,10)
}
}
</script>
</body>
</html>
实在不懂为什么报错说a[i].close()对象不支持此属性或方法，哪位大神能帮忙搞定下这个问题？？？

解决方案 »

  1.   

    你自己写的close（）方法html的元素是调用不了的！
      

  2.   

    额。我从新调试了一下，你看下这段代码应该好点了，不过还是没实现功能。
    <!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=utf-8" />
    <script type="text/javascript"></script>
    <title>网页特效大全:用JS做的下拉菜单 滑动门效果</title>
    <style type="text/css">
    div,ul,li,h3{margin:0px;padding:0px;}
    ul,li{list-style-type:none;}
    div{cursor:pointer;}
    #pig{width:100px;height:20px;background:green;}
    #father{height:200px;width:100px;}
    #father ul li h3{width:100px;height:25px;background:red;}
    #father div{background:black;height:0px;overflow:hidden;}
    </style>
    </head>
    <body>
    <div id="father">
    <ul>
    <li onclick="boss(0)"><h3>111</h3><div>啊啊</div></li>
    <li onclick="boss(1)"><h3>222</h3><div>啊啊</div></li>
    <li onclick="boss(2)"><h3>333</h3><div>啊啊</div></li>
    <li onclick="boss(3)"><h3>444</h3><div>啊啊</div></li>
    </ul>
    </div>
    <!--<div id="pig" onclick="boss()">11111111</div>-->
    <script type="text/javascript">
    var time1 = null;
    var time2 = null;
    var time3 = null;
    var time4 = null;
    var b =25;
    var d =0;
    var a = document.getElementById("father").getElementsByTagName("div");
    function boss(h){
    for (i=0;i<a.length ;i++ )
    {
    close(a[i]);
    }
    open(a[h]);
    }function close(e){
    if (d>0)
    {
    d=d-5;
    e.style.height = d+"px";
    }
    if (time4){
    clearTimeout(time4);
    time3 = setTimeout(close,10)
    }
    }function open(e){
    if (d<100)
    {
    d=d+5;
    e.style.height = d+"px";
    }
    if (time3)
    {
    clearTimeout(time3);
    time4 = setTimeout(open,10)
    }
    }</script>
    </body>
    </html>
      

  3.   

    <!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=utf-8" />
    <script type="text/javascript"></script>
    <title>网页特效大全:用JS做的下拉菜单 滑动门效果</title>
    <style type="text/css">
    div,ul,li,h3{margin:0px;padding:0px;}
    ul,li{list-style-type:none;}
    div{cursor:pointer;}#father{height:200px;width:100px;}
    #father ul li h3{width:100px;height:25px;}
    #father div{
    height:30px;
    border:1px solid red;
    }
    </style>
    </head>
    <body>
    <div id="father">
    <ul>
    <li onclick="boss(0)"><div><h3>111</h3></div></li>
    <li onclick="boss(1)"><div><h3>222</h3></div></li>
    <li onclick="boss(2)"><div><h3>333</h3></div></li>
    <li onclick="boss(3)"><div><h3>444</h3></div></li>
    </ul>
    </div>
    <script type="text/javascript">
    var length = 30;
    var div;
    var list = document.getElementById("father").getElementsByTagName("div");
    function boss(index){
    for (i = 0; i < list.length; i++ )
    {
    close(list[i]);
    } open(list[index],length);
    } function close(element)
    {

    element.style.height = "30px";
    } function open(element, length)
    {
    div = element;
    setInterval('add()', 20);
    } function add()
    {
    if(parseInt(length) < 100)
    {
    length = length + 20;
    div.style.height = length + "px";
    }
    else{
    clearInterval();
    }
    return;
    }
    </script>
    </body>
    </html>目前实现到这个程度，但是每次只能点开一个然后就什么都点不开了。
      

  4.   

    <!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=utf-8" />
    <script type="text/javascript"></script>
    <title>网页特效大全:用JS做的下拉菜单 滑动门效果</title>
    <style type="text/css">
    div,ul,li,h3{margin:0px;padding:0px;}
    ul,li{list-style-type:none;}
    div{cursor:pointer;}#father{height:200px;width:100px;}
    #father ul li h3{width:100px;height:25px;}
    #father div{
    height:30px;
    border:1px solid red;
    }
    </style>
    </head>
    <body>
    <div id="father">
    <ul>
    <li onclick="boss(0)"><div><h3>111</h3></div></li>
    <li onclick="boss(1)"><div><h3>222</h3></div></li>
    <li onclick="boss(2)"><div><h3>333</h3></div></li>
    <li onclick="boss(3)"><div><h3>444</h3></div></li>
    </ul>
    </div>
    <script type="text/javascript">
    var length = 30;
    var div;
    var list = document.getElementById("father").getElementsByTagName("div");
    function boss(index)
    {
    alert(index);
    for (i = 0; i < list.length; i++ )
    {
    close(list[i]);
    }
    open(list[index],length);
    }function close(element)
    { element.style.height = "30px";
    }function open(element, length)
    {
    element.style.height = "100px";
    }function add()
    {
    if(parseInt(length) < 100)
    {
    length = length + 20;
    div.style.height = length + "px";
    }
    else{
    clearInterval();
    }
    return;
    }
    </script>
    </body>
    </html>
      

  5.   

    你的这个写法直接就没调用到add()函数里的东西，而是直接在上面的open()函数里面就赋值了，这样不行的，你看下我现在调试的这个，基本上已经很接近了，关键还有一点就是如何在我点击的那个对象逐渐撑开的同时其他的对象如果事先是撑开的话，也能缓慢的赋值而不是像我现在写的close（）函数里面那样直接就赋值给它。<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>JS测试</title>
    <style type="text/css">
    <!--div,ul,li,h3{margin:0px;padding:0px;}
    ul,li{list-style-type:none;}
    div{cursor:pointer;}#father{height:200px;width:100px;}
    #father ul li h3{width:100px;height:25px;}
    #father div{
    height:30px;
    }
    #father .open{height:100px;}-->
    </style>
    <script type="text/javascript"  defer>
    <!--var length = 30;
    var div = null;
    var list = document.getElementById("father").getElementsByTagName("div");
    var index_Interval = null;function boss(index) {
    for (i = 0; i < list.length; i++ ) {
    close(list[i]);
    }
    open(list[index],length);
    }
    function close(element) { element.style.height = "30px";
    }
    function open(element, length) {
    div = element;
    index_Interval = setInterval('add()', 20);
    }
    function add() {
    if (parseInt(length) < 100) {
    length = length + 20;
    div.style.height = length + "px";
    }
    else {
    clearInterval(index_Interval);
    length = 30;
    }
    }//-->
    </script>
    </head>
    <body><div id="father">
    <ul style="height:175px;border:1px solid green">
    <li  onclick="boss(0)"><div class="open" style="background:red">111</div></li>
    <li onclick="boss(1)"><div style="background:blue">222</div></li>
    <li onclick="boss(2)"><div style="background:black">333</div></li>
    <li onclick="boss(3)"><div style="background:yellow">444</div></li>
    </ul>
    </div></body>
    </html>