所以,我正在做一个设置,当我点击一个 id 为“sbox”的 div 时,它会使 id 为“box”的 div 展开并改变不透明度,这就是我拥有的 jQuery,
$(document).ready(function(){
TriggerClick = 0;
$("#sbox").click(function(){
if(TriggerClick==0){
TriggerClick=1;
$("#box").animate({width:'100px', height:'100px', opacity: '0'}, 500);
}else{
TriggerClick=0;
$("#box").animate({width:'500px', height: '500px', opacity: '1'}, 500);
};
});
});
现在,当我有多个 id 为“sbox”的 div 时,只有第一个框会执行动画:
<div id="sbox">WORKS</div>
<div id="sbox">This one doesn't</div>
<div id="sbox">This one doesn't</div>
<div id="sbox">This one doesn't</div>
<div id="sbox">This one doesn't</div>
<div id="box">This is the box that expands</div>
还有 lastyl,我不确定这是否有帮助,但这是我的样式表:
#box {
width: 100px;
height: 100px;
background: red;
opacity: 0;
position: fixed;
left: 50%;
right: 50%;
}
#sbox {
background: blue;
margin: 2px;
display: inline-block;
width: 50px;
height: 50px;
}
如果您对我的代码有任何想法或建议,请尽力提供帮助。谢谢。
-编辑-
我的目标是获得一组盒子和一个更大的不可见盒子,当您单击数组中的一个盒子时,大盒子会展开并变为可见,当您单击同一个盒子时,它会缩小并变成不可见。
最佳答案
您不能为不同的元素分配相同的 ID,而是使用类。
CSS:
.sbox {
background: blue;
margin: 2px;
display: inline-block;
width: 50px;
height: 50px;
}
<---css 结束--->
$(document).ready(function(){
TriggerClick = 0;
$(".sbox").click(function(){
if(TriggerClick==0){
TriggerClick=1;
$("#box").animate({width:'100px', height:'100px', opacity: '0'}, 500);
}else{
TriggerClick=0;
$("#box").animate({width:'500px', height: '500px', opacity: '1'}, 500);
};
});
});
关于javascript - jQuery 激活器不适用于多个 DIV,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20304990/