【发布时间】:2014-09-19 15:04:41
【问题描述】:
我试图让'timelineTile' div 打开和关闭,如果另一个被打开也关闭,并且在点击背景时也关闭,如果点击另一个和背景,我已经设法让它关闭,但我可以如果单击 div 本身,则不会关闭 div...这是我的fiddle
我的代码;
$(function () {
$('.timelineTile').click(function (evt) {
evt.stopPropagation();
$('.selected').children().removeClass('clicked');
$(this).toggleClass('clicked');
});
$(document).click(function () {
$('.timelineTile').removeClass('clicked');
});
});
.timelineTile.clicked{
background:red;
width:500px;
height:300px;
-webkit-transition:height 1s, left 1s, -webkit-transform 1s;
transition:height 1s, left 1s, transform 1s;
}
.selected {
-webkit-transition:height 1s, left 1s, -webkit-transform 1s;
transition:height 1s, left 1s, transform 1s;
}
.timelineTile {
background:black;
color:white;
width:200px;
height:100px;
margin-bottom:20px;
-webkit-transition:height 1s, left 1s, -webkit-transform 1s;
transition:height 1s, left 1s, transform 1s;
}
.timelineTilehold {
background:pink;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<ul class="timelineTilehold">
<li class="selected"><div class="timelineTile">hello
</div></li>
<li class="selected"><div class="timelineTile">hello
</div></li>
<li class="selected"><div class="timelineTile">hello
</div></li></ul>
【问题讨论】:
-
您需要在文档点击方法中返回 false。否则事件的冒泡会导致被点击的类再次切换
-
如果我删除它然后停止'如果单击另一个则关闭'
标签: jquery html css class toggle