使用先前的值进行后续函数调用

| 的CSS
body{  
  background:#000;   
  width:320px;  
 height:480px;  
}  

.view  
{  
   width:320px;   
   height:480px;   
   background:#0066CC;  
   overflow:hidden;  
   visibility:hidden;  
   position:absolute;   
   left:0;top:0;  
   z-index:8; 
}  

.o{background:#FF9900;}   

.main{ visibility:visible;}  

.swapper {
  width:640px;  
 height:480px;   
  overflow:hidden;   
  position:absolute;  
   left:0;top:0;  
  visibility:hidden;  
  z-index:9;
 }  
 .on{position:static; float:left; visibility:visible;}  

 .btn {height:50px; width:125px; font-size:16px; background:#000; color:#FFF;}
的JavaScript
function $(id)
{
    return document.getElementById(id);
}

function clean()
{
        alert(\"1\");
        ele = $(\"swapper\");
        ele.removeEventListener(\"webkitTransitionEnd\" , clean , true);
        //ele.style.webkitTransition = \"height 0s\";
        ele.style.webkitTransform = \"translate3d(0px,0,0)\";
        ele.zIndex = \"7\";
        ele.style.visibility = \"hidden\";
        //currentView = nextView;

}
function show(current , next)
{

    alert(current+ \"    \" + next);
    //nextView = next;
    s = $(\"swapper\");
    s.innerHTML = \"\";
    nel = $(next);
    cel = $(current);
    v1 = cel.cloneNode(true);v2 = nel.cloneNode(true);

    v1.id = \"v1\";  v1.onclick = \"\"; v1.className += \" on\";
    v2.id = \"v2\";  v2.onclick = \"\"; v2.className += \" on\";

    s.appendChild(v1);  s.appendChild(v2);
    s.style.webkitTransition = \"-webkit-transform 1s ease\";

    s.style.zIndex = \"9\";
    s.style.visibility = \"visible\";
    nel.style.visibility = \"visible\";
    cel.style.visibility = \"hidden\";



    //s.style.left = \"0px\";
    s.addEventListener(\"webkitTransitionEnd\" , clean, true);
    s.style.webkitTransform = \"translate3d(-320px,0,0)\";
    //setTimeout(clean , 1000);
}
的HTML
<div id=\"swapper\" class=\"swapper\"></div>

<div id=\"container\">
    <div id=\"set1\">
        <div id=\"main\" class=\"view main o\"><h1>1</h1><span class=\"btn\" onclick=\"show(\'main\',\'2\');\">Next</span></div>
        <div id=\"2\" class=\"view\"><h1>2</h1><span class=\"btn\" onclick=\"show(\'2\',\'3\');\">Next</span></div>
        <div id=\"3\" class=\"view o\"><h1>3</h1><span class=\"btn\" onclick=\"show(\'3\',\'4\');\">Next</span></div>
        <div id=\"4\" class=\"view\"><h1>4</h1><span class=\"btn\" onclick=\"show(\'4\',\'main\');\">Next</span></div>
    </div>
</div>

</body>
我正在尝试创建滑动面板,但是此javascript函数在被调用时会使用以前的值执行一次,然后使用新值执行。     
已邀请:
这种菜单称为水平手风琴。 jQuery有许多简单的插件-为什么要重新发明轮子?提供了许多示例: 例子 haccordion,一个用于jQuery的简单水平手风琴插件 jQuery简单水平手风琴 30个jQuery手风琴菜单,教程和最佳示例     

要回复问题请先登录注册