Javascript 在展开另一个div时隐藏div？

我的页面上有8个div。4个在顶部，4个在底部。对于顶部的4个div，我有一段Javascript代码，可以展开/取消隐藏它们下面的一个div（参见JSFIDLE）。我想这样做，当这些div被展开时，页面底部的4个div被隐藏。然后，当div未展开时，页面底部的4个div再次显示

请参阅我的JSFIDLE：

我对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) );  
    });

    });

---

非常感谢

现在，您可以检查内容div的可见性，也可以通过标志跟踪打开/关闭

这是你的电话号码

通过旗帜处理

var bottomDivOpen=true;
function showHideBottomDiv(){
            if(bottomDivOpen==true){
                $(".static").hide();
                bottomDivOpen=false;
            }else{
                $(".static").show();
                bottomDivOpen=true;
            }
        }

---

现在，您可以检查内容div的可见性，也可以通过一个标志跟踪打开/关闭

这是你的电话号码

通过旗帜处理

var bottomDivOpen=true;
function showHideBottomDiv(){
            if(bottomDivOpen==true){
                $(".static").hide();
                bottomDivOpen=false;
            }else{
                $(".static").show();
                bottomDivOpen=true;
            }
        }

---

可以执行类似的操作以在静态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);
                }


        });



        });

---

可以执行类似的操作以在静态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);
                }


        });



        });

另一个解决方案：

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

另一种解决方案：

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

---

制作一个JSFIDLE请我已经发布了一个JSFIDLE-制作一个JSFIDLE请我已经发布了一个JSFIDLE-这是一个很好的做法，但是当您单击另一个选项卡时，底部的div会重新出现。这是一个很好的做法，但是当你点击另一个标签时，底部的div会重新出现。反应类似于切换。如果动画未完成（例如，快速单击方框1、2、1）它将不起作用。如果动画未完成（例如，快速单击方框1、2、1）它将不起作用。谢谢，但尽管它隐藏了底部的div，但其中的内容似乎仍然显示出来？@Tom，什么内容？底框的内容是否与顶框相同？我在你的提琴中为HTML编写了以下代码：-）对不起，在那个示例中你将无法看到它，因为背景图像不显示。这里看一看这个更新的例子——在隐藏div之后，div中的文本仍然显示。您可以使用f.ex

opacity

而不是

height

-，或者在动画完成时更改

display

CSS属性-我真的找不到问题的来源。我会尽力找到的谢谢，但是虽然它隐藏了最下面的div，但是里面的内容似乎仍然显示出来了？@Tom，什么内容？底框的内容是否与顶框相同？我在你的提琴中为HTML编写了以下代码：-）对不起，在那个示例中你将无法看到它，因为背景图像不显示。这里看一看这个更新的例子——在隐藏div之后，div中的文本仍然显示。您可以使用f.ex

opacity

而不是

height

-，或者在动画完成时更改

display

CSS属性-我真的找不到问题的来源。我会设法弄清楚的