对html子节点操作的问题

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test hidden</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript">

</script>
</head> <body>
<dl>
<dt>onclick</dt>
<dd><a href="#">small menu1</a></dd>
<dd><a href="#">small menu2</a></dd>
<dd><a href="#">small menu3</a></dd>
</dl>
<dl>
<dt>onclick</dt>
<dd><a href="#">small menu1</a></dd>
<dd><a href="#">small menu2</a></dd>
<dd><a href="#">small menu3</a></dd>
</dl>
</body>
</html>onclick来隐藏（显示）dd 标签里的内容。新手，没能写成功。
[不能用到window.onload，不然会出问题。]请各位前辈指点。分不够再加。

解决方案 »

  1.   

    <a onclick="display(this)">onclick</a>
    function display(obj){
     if(!obj.style.display=="")
     {
      obj.style.display="none";
     else{
      obj.style.display="";
     }
    }
      

  2.   

    给dl加个id
    onclick时
    var dl=document.getElementById("dlid");
    var a=dl.document.getElementsByTagName("a");
    for(var i=0;i<a.length;i++){
       a[i].style.display=''; //或者 a[i].style.display='none',显隐自己控制
    }
      

  3.   

    那不是我每个dl都要不能的ID？因为我的dl很多的。
      

  4.   

    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <title>test hidden</title>
            <meta http-equiv="content-type" content="text/html; charset=utf-8" />
            <script type="text/javascript">
                
            </script>
        </head>    <body>
            <div id="nav"><dl>
                <dt>onclick</dt>
                <dd><a href="#">small menu1</a></dd>
                <dd><a href="#">small menu2</a></dd>
                <dd><a href="#">small menu3</a></dd>
            </dl>
            <dl>
                <dt>onclick</dt>
                <dd><a href="#">small menu1</a></dd>
                <dd><a href="#">small menu2</a></dd>
                <dd><a href="#">small menu3</a></dd>
            </dl></div>
        </body>
    </html>
      

  5.   

    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <title>test hidden</title>
            <meta http-equiv="content-type" content="text/html; charset=utf-8" />
            <script type="text/javascript">
    function hidedd(){
    var o = event.srcElement;
    for(var i =0;i< o.parentNode.childNodes.length;i++)
    {
    if(o.parentNode.childNodes[i] != o)
    o.parentNode.childNodes[i].childNodes[0].style.display = "none";
    }
    }
            </script>
        </head>    <body>
            <dl>
                <dt onclick="hidedd()">onclick</dt>
                <dd><a href="#">small menu1</a></dd>
                <dd><a href="#">small menu2</a></dd>
                <dd><a href="#">small menu3</a></dd>
            </dl>
            <dl>
                <dt onclick="hidedd()">onclick</dt>
                <dd><a href="#">small menu1</a></dd>
                <dd><a href="#">small menu2</a></dd>
                <dd><a href="#">small menu3</a></dd>
            </dl>
        </body>
    </html>
      

  6.   

    我想楼主不是要点dt隐藏所有的dd里面的内容吧， 而是点某个dt隐藏同级的dd内容上面的代码按这个思路来的
      

  7.   

    <html xmlns="http://www.w3.org/1999/xhtml"> 
        <head> 
            <title>test hidden </title> 
            <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
    <style>
    <!--
    .aa dd {display:"none";}
    -->
    </style>
            <script type="text/javascript"> 
    function menu() {
    var o = event.srcElement;
    for(var i=0; i<o.parentNode.childNodes.length; i++)
    {
    if(o.parentNode.childNodes[i] != o)
    o.parentNode.childNodes[i].childNodes[0].style.display="block";
    }
    }
            </script> 
        </head>     <body> 
        <div class=aa><dl> 
                <dt onclick="menu()">onclick </dt> 
                <dd> <a href="#">small menu1 </a> </dd> 
                <dd> <a href="#">small menu2 </a> </dd> 
                <dd> <a href="#">small menu3 </a> </dd> 
            </dl> 
            <dl> 
                <dt onclick="menu()">onclick </dt> 
                <dd> <a href="#">small menu1 </a> </dd> 
                <dd> <a href="#">small menu2 </a> </dd> 
                <dd> <a href="#">small menu3 </a> </dd> 
    </dl></div> 
        </body> 
    </html>这样都没办法显示。不知道为什么。
      

  8.   

    <html xmlns="http://www.w3.org/1999/xhtml"> 
        <head> 
            <title>test hidden </title> 
            <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
            <script type="text/javascript"> 
    function hidedd(){ 
    var o = event.srcElement; 
    for(var i =0;i < o.parentNode.childNodes.length;i++) 
    { 
    if(o.parentNode.childNodes[i] != o) {
    if(o.parentNode.show==1){
    o.parentNode.childNodes[i].childNodes[0].style.display = ""; 
    }else{
    o.parentNode.childNodes[i].childNodes[0].style.display = "none"; 
    }
    }
    } 
     o.parentNode.show==1 ? o.parentNode.show = 0 : o.parentNode.show = 1; 
    } 
            </script> 
        </head>     <body> 
            <dl> 
                <dt onclick="hidedd()">onclick </dt> 
                <dd> <a href="#">small menu1 </a> </dd> 
                <dd> <a href="#">small menu2 </a> </dd> 
                <dd> <a href="#">small menu3 </a> </dd> 
            </dl> 
            <dl> 
                <dt onclick="hidedd()">onclick </dt> 
                <dd> <a href="#">small menu1 </a> </dd> 
                <dd> <a href="#">small menu2 </a> </dd> 
                <dd> <a href="#">small menu3 </a> </dd> 
            </dl> 
        </body> 
    </html>