Итак, я делаю настройку, где, когда я нажимаю один из div с идентификатором "sbox", он будет делить div с идентификатором "box" expand и opacity change, это 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);
};
});
});
Теперь, когда у меня есть несколько div с идентификатором "sbox", только первый ящик будет делать анимацию:
<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;
}
Если у вас есть идеи или предложения для моего кода, пожалуйста, ПОЖАЛУЙСТА, попробуйте помочь. Спасибо.
-РЕДАКТИРОВАТЬ-
Моя цель состоит в том, чтобы получить массив ящиков и одну большую коробку, которая невидима, когда вы нажимаете одно из полей в массиве, большая коробка расширяется и становится видимой, когда вы нажимаете тот же самый ящик, он сжимается и становится невидимым.
вы не можете назначить одинаковый идентификатор для разных элементов, вместо этого используйте класс.
CSS:
.sbox {
background: blue;
margin: 2px;
display: inline-block;
width: 50px;
height: 50px;
}
<---end из 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);
};
});
});