Question

所以，我正在设置一个设置，当我点击其中一个ID为“sbox”的div时，它会使id为“box”的div展开，不透明度改变这就是我所拥有的jQuery，< / p>

$(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>

而且，我不确定这是否会有所帮助，但这是我的样式表：

#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，而是使用class。

的CSS：

.sbox {
    background: blue;
    margin: 2px;
    display: inline-block;
    width: 50px;
    height: 50px;
}

＆lt; --- css结束---＆gt;

$(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);
    };
  });
});

jQuery激活器不能处理多个DIV

1 个答案: