当另一个div展开时隐藏div？
当另一个div展开时隐藏div？
提问于 2015-03-28 11:16:52
我的页面上有8个div。4在顶部，4在底部。对于顶部的4个div，我有一段Javascript代码，在它们下面展开/隐藏一个div(参见JSFiddle)。我想做它，以便当这些div被展开时，在页面底部的4个div隐藏。然后，当div未展开时，页面底部的4个div将再次显示。
请看我的JSFiddle：https://jsfiddle.net/44478c41/
我对Javascript知之甚少，但我对我现有的代码做了手脚，试图让它正常工作，我设法隐藏了div，但没有在div中隐藏内容，也无法让它再次隐藏起来。下面是我编辑代码的内容：
$(document).ready(function() {
var $cont;
function tgl_conts(){
$('.static').stop().animate({height: 0},1200);
$cont.stop().animate({height:210},1200);
}
$('.tab_collapsable').on('click',function(){
var tabClass=$(this).attr('class').split(' ')[1];
$cont = $('.'+tabClass+':not(.tab_collapsable)');
var h = ($cont.height() === 0) ? tgl_conts() : ( $cont.stop().animate({height: 0},1200) );
});
});非常感谢!
回答 3
Stack Overflow用户
回答已采纳
发布于 2015-03-28 12:30:43
另一个解决办法是：
$('.tab_collapsable').on('click',function(){
var tabClass = $(this).attr('class').split(' ')[1];
var h = $('.content.'+tabClass).height() ? 0 : 210;
$('.content').stop().animate({height: h},1200)
.not('.'+tabClass).stop().animate({height: 0},1200);
$('.static').stop().animate({height: h ? 0 : 250},1200);
});Stack Overflow用户
发布于 2015-03-28 11:34:59
在这里，您可以检查内容div的可见性，也可以通过一个标志跟踪打开/关闭。
这是小提琴
通过旗子进行处理；
var bottomDivOpen=true;
function showHideBottomDiv(){
if(bottomDivOpen==true){
$(".static").hide();
bottomDivOpen=false;
}else{
$(".static").show();
bottomDivOpen=true;
}
}Stack Overflow用户
发布于 2015-03-28 12:16:18
您可以这样做，以保留静态div的动画效果。
$(document).ready(function() {
var $cont;
function tgl_conts(){
$('.content').stop().animate({height: 0},1200);
$cont.stop().animate({height:210},1200);
}
$('.tab_collapsable').on('click',function(){
var tabClass=$(this).attr('class').split(' ')[1];
$cont = $('.'+tabClass+':not(.tab_collapsable)');
if ($cont.height() === 0) {
tgl_conts();
$('.static').stop().animate({height: 0},1200);
} else {
$cont.stop().animate({height: 0},1200);
$('.static').stop().animate({height: 250},1200);
}
});
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/29316472
复制相关文章
相似问题
腾讯云开发者
