点击dt里面的文字，实现控制dl的显示和位置

代码如下，在dt里面我插入了一个div，想通过这个DIV可以让这个DL显示或者隐藏，还有一个功能是想通过这个DIV可以移动当前DL（上下移动）求指导，我除学JS，望多注释，感谢！<!DOCTYPE html>
<html dir="ltr" lang="zh-CN">
<head>
<meta charset="GB2312" />
<title></title>
<style>
#list_show { width:600px; margin:0 auto;}
#list_show dl dt { height:30px; background:#CCC;}
</style>
</head><body>
<script>
window.onload = initAll;
function insertAfter(newElement,targetElement){
    var parent=targetElement.parentNode;
    if(parent.lastChild == targetElement){
parent.appendChild(newElement);
    }else{
parent.insertBefore(newElement,targetElement.nextSiling);
    }
}
function initAll(){
var dls = document.getElementById("list_show").getElementsByTagName("dl");
for(var i = 0; i < dls.length; i++){
var dtTool = document.createElement("div");
var dtText = document.createTextNode("点击");
dtTool.appendChild(dtText);
var dt = dls[i].getElementsByTagName("dt")[0];
insertAfter(dtTool,dt);
dls[i].style.position = "relative";
dls[i].style.display = "block";
dtTool.style.position = "absolute";
dtTool.style.top = "7px";
dtTool.style.right = "10px";
dtTool.style.cursor = "pointer";
dtTool.onclick = function(){
if(dls[i].style.display == "block"){
dls[i].style.display = "none";
}else{
dls[i].style.display = "block";
}
}
}
}
</script>
<article id="list_show">
    <dl class="list">
     <dt><a href="#">TITLE 1</a></dt>
        <dd><a href="">AAAAAAAAAAA</a> </dd>
        <dd><a href="">AAAAAAAAAAA</a> </dd>
        <dd><a href="">AAAAAAAAAAA</a> </dd>
    </dl>
    <dl class="list">
     <dt><a href="">TITLE 2</a></dt>
        <dd><a href="">BBBBBBBBBB</a> </dd>
        <dd><a href="">BBBBBBBBB</a> </dd>
        <dd><a href="">BBBBBBBBBBB</a> </dd>
    </dl>
</article>
</body>
</html>

解决方案 »

  1.   

            dtTool.onclick = (function(i){
                return function(){
                    if(dls[i].style.display == "block"){
                        dls[i].style.display = "none";
                    }else{
                        dls[i].style.display = "block";
                    }
                }
            })(i);闭包问题。自己去查一下闭包是什么情况。。我也说不清楚。
      

  2.   

    1楼的方法是正确的。
    是闭包的问题,onclick事件绑定的函数在你最终点击执行的时候形成闭包，闭包有一个特点就是内部函数（在这里就是‘dtToolonclick=’后面的函数）在执行中引用外部函数（initAll）的变量时会引用其最终值。
    所以无论你点击第一个按钮还是第二个，函数中的i值都为2（initAll执行完毕后i的最终值为2），dl[2]不存在，所以失效。