Question

我正在尝试制作一个带有几个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>

那就是js和jquery：

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++;  
});

由于

Answer 1

而不是使用.on('click'使用delegate('click'或`.live（＆＃39;点击＆＃39;，因为您要附加div。

然而，.live和.delegate都被取代了，所以我想这将是一个快速解决方案。

再看一下代码，我想你可能不得不使用＆＃39; addClass＆＃39;将正确的类添加到要附加的div中，并在元素居中后使用控制台检查元素，并确保元素的类存在。

切换弹出DIV标签不起作用

1 个答案: