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;
            }
        }

Answer 2

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


        });



        });

Answer 3

又一个解决方案：

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

JSFiddle

另一个div扩展时隐藏div？

3 个答案: