<div class="row">
<div class="showmessage" style="display:none">you have removed all items</div>
<div class=" col-sm-4"> data 1 <span class="close">close</span> </div>
<div class=" col-sm-4"> data 2 </div>
<div class=" col-sm-4"> data 3 </div>
</div>
<script>
$('.close').click(function(){
$(this).closest('.col-sm-4').slideUp();
});
</script>
我想在用户逐个隐藏所有.showmessage
时显示.col-sm-4
。
此外,它应该在最后一个项目的滑动动画完成后显示。
答案 0 :(得分:1)
在零时检查.col-sm-4
的计数,使用show
$('.close').click(function(){
$(this).closest('.col-sm-4').slideUp();
if (!$('.col-sm-4').length) {
$('.showmessage').show();
}
});
答案 1 :(得分:1)
您可以使用$('.close:visible').length === 0
检查是否还有任何项目已打开。此外,您似乎忘记添加其他关闭按钮。
$('.close').click(function() {
$(this).closest('.col-sm-4').slideUp(function() {
if ($('.close:visible').length === 0) {
$('.showmessage').show();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="showmessage" style="display:none">you have removed all items</div>
<div class="col-sm-4">data 1 <button class="close">close</button></div>
<div class="col-sm-4">data 2 <button class="close">close</button></div>
<div class="col-sm-4">data 3 <button class="close">close</button></div>
</div>
答案 2 :(得分:0)
你的意思是this:
$('.close').click(function(){
var $parent = $(this).parent();
$parent.slideUp('fast', function () {
if(!$(this).siblings('.col-sm-4').is(':visible')) {
$(this).siblings('.showmessage').show();
} else {
$(this).siblings('.showmessage').hide();
}
});
});