Javascript 切换弹出DIV标签不起作用

我试着用几个div来创建一个简单的页面，如果你点击一个div，它就会移动到中间，而其他div在背景中仍然可见。当你点击另一个在背景中可见的div时，中间的div会回到它之前的位置，点击div会回到中间并调整大小。此外，如果单击中心的div，它应该返回到以前的位置。 我为它制作了一个Jquery脚本，但它不能正常工作——第一次单击任何div都可以正常工作，但随后的任何单击都会停止工作。 下面是一个带有一些样式的html：

<style>
#outside1 {background-color:gray;}   #outside2 {background-color:blue;}        #outside3 {background-color:brown;}
#inside1 {background-color:red;}     #inside2 {background-color:green;}   
#inside3 {background-color:pink;}    #inside4 {background-color:yellow;}
#inside5 {background-color:gold;}    #inside6 {background-color:silver;}

.outside {width:100px; height:90px; margin:5px; }   .inside {display:none; margin:2px;  }
#test1 {height:400px; }
</style>


<div id=test1>
<div id='outside1' class='outside'> div outside 1 <br/>
<div id='inside1' class='inside'> div inside 1 <br/>   </div>
<div id='inside2' class='inside'> div inside 2 <br/>   </div>
</div> 

<div id='outside2' class='outside'> div outside 2 <br/>
<div id='inside3' class='inside'> div inside 3 <br/>   </div>
<div id='inside4' class='inside'> div inside 4 <br/>   </div>
</div> 

<div id='outside3' class='outside'> div outside 2 <br/>
<div id='inside5' class='inside'> div inside 3 <br/>   </div>
<div id='inside6' class='inside'> div inside 4 <br/>   </div>
</div> 

</div>    

感谢您不要使用。在“单击”时，请使用代理“单击”或“实时”单击，因为您正在添加div

然而，.live和.delegate都被取代了，所以我想这将是一个“快速修复”

再看一遍代码，我认为您可能必须使用“addClass”将正确的类添加到要追加的div中，并在元素居中后使用控制台检查元素，确保元素的类存在

kd_small={top: 0, left: 0,  opacity: 1, width:100, height:90 } ;
kd_big = {top: -90, left: +50,  opacity: 1, width:200, height:150 };
var t=0; 

function hextend(d){
  d.animate(kd_big);       d.find('div').show();        $('.outside').off();   
  var sbs=$(d).siblings();  $(sbs).off(); sbs.append('i am siblings');      
  d.append('I AM CLICKED');   hshrink($(sbs));   
  d.on('click', function (){ hshrink($(d));   });
  $(sbs).on('click', function (){ hextend($(sbs));   });
}

function hshrink(s){
 s.find('div').hide(); s.animate(kd_small);    
}

$('.outside').on('click', function(){
  hextend($(this) ); 
});

$('.inside').on('click', function(e){
  e.stopPropagation();  $(this).html('inside div clicked' + t +'times');  
  t++;  
});