javascript - 当另一个 div 展开时隐藏 div？

Question

我的页面上有 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) );  
    });

    });

非常感谢!

Answer 1

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

这是 Fiddle

通过标志处理；

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