javascript - jQuery 激活器不适用于多个 DIV

Question

所以，我正在做一个设置，当我点击一个 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;
}

如果您对我的代码有任何想法或建议，请尽力提供帮助。谢谢。

-编辑-

我的目标是获得一组盒子和一个更大的不可见盒子，当您单击数组中的一个盒子时，大盒子会展开并变为可见，当您单击同一个盒子时，它会缩小并变成不可见。

Answer 1

您不能为不同的元素分配相同的 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);
    };
  });
});