Javascript 在页脚上使用滑动切换时，如何从顶部推动所有元素？

我有一个页脚，当点击这个页脚时，我希望它向上滑动切换，并从顶部推动所有元素，而不重叠它们

这是第一种观点

这是单击黄色元素后的视图

我无法在JSFIDLE上复制这一点。这是我的css、js和底部html

$("li#dropdown").on('click', function(e) {
    $('#toggleList').slideToggle();
    e.preventDefault();
});

这是我的底层CSS，使用更少

footer {
    background-color: #F8F8F8;
    text-align: center;
    padding-top:36px;
    position: absolute;
    width: 100%;
    bottom: 0;
    display:inline-block;
    nav {
        //margin-top:36px;
        ul {
            list-style-type: none;
            margin:0;
            padding:0;
            text-align: center;
            li {
                display:inline-block;
                a {
                    text-decoration: none;
                    font: normal 16px "proxima_novasemibold", helvetica;
                    color: #828282;
                    padding:0 8px;
                    margin-left: 5px;
                    &:hover {
                        text-decoration: none;
                        color: @pale-green;
                    }
                }
                &#dropdown {
                    cursor: pointer;
                }
            }
            li:last-child a span {
                background:url(../img/arrow.jpg) no-repeat;    
                width:16px;
                height:12px;
                display:inline-block;
                margin-left: 5px;
            }
        }
        .franchise-list {
            text-align: justify;
            display: inline-block;
            margin:23px 0;
            h4 {
                text-transform: uppercase;
                margin:5px 0;
                font-size: 12px;
                font-weight: bold;
                color: #666;                    
            }
            span {

            }
            .franchise-col {
                float:left;
                font-size: 11px;
                margin-left:20px;
            }
        }
    }
    .bottom-info {
        font: normal 12px "proxima_novasemibold", helvetica;
        padding-top: 26px;
        padding-bottom: 18px;
        background-color: #F8F8F8;
        text-align: center;
        span {
            color:#696969;
        }
        div {
            display:inline;
            color: #199151;
            a {
                color:#199151;
                text-decoration: underline;
            }
        }
    }  
}  

这是我的最底层HTML

<footer>
<nav>
    <ul>
        <li><a href="">ABOUT APPLE AUTO GLASS</a></li>
        <li><a href="">SIX POINT CARE PROCESS&#8482;</a></li>
        <li><a href="">HASSLE FREE INSURANCE CLAIMS</a></li>
        <li><a href="">FAQ</a></li>
        <li id="dropdown"><a>APPLE AUTO GLASS STORES<span class="dropdown-stores"></span></a></li>
    </ul>  
    <div class="franchise-list" id="toggleList" style="display:none;">   
    <?php 
        $regions = [];
        $listFranchises = [];
    ?>
@foreach($franchises as $key => $value)            
        <?php 
            $listFranchises[$key] = [$value->region, $value->town, $value->address];
            if (!(in_array($value->region, $regions))) {
                array_push($regions, $value->region);
            }                                     
        ?>
@endforeach
    <?php
        $counter = 0;
        $franchiseList = count($listFranchises) + count($regions);
        $marker = true;
        foreach($regions as $region) {           
            if ($counter%14 === 0 && $marker) {
                echo ('<div class="franchise-col">');             
            }
            else {
                $marker = true;
            }
            $counter += 1;
            echo ('<h4 counter="'.$counter.'/'.$franchiseList.'">'.$region.'</h4>');               
            foreach($listFranchises as $key => $value) {                  
                if($region === $value[0]) {
                    $counter += 1;
                    echo ('<span counter="'.$counter.'/'.$franchiseList.'"><a href="#">'.$value[1].'</a> - '.$value[2].'</span><br>');
                    if ($counter%14 === 0) {
                        echo ('</div>');
                    }
                    if ($counter%14 === 0 && ($franchiseList-$counter > 0)) {
                        echo ('<div class="franchise-col">'); 
                        $marker = false;
                    }
                    if (($franchiseList - $counter) == 0) {
                        echo ('</div>');
                    }
                } 
            }                 
        }
    ?>  

    </div>
</nav>
<div class="bottom-info">
    <span>Copyright &#169; <?php echo date('Y') ?> Apple Auto Glass &#174;. All Rights Reserved.</span>
    <div>
        <a href="">Terms of Use</a> |
        <a href="">Privacy Policy</a>
    </a>
</div>   

---

这里有一种方法，根本没有优化或清理，但它是有效的：

它使用两种不同的技术

打开面板时，我检查面板顶部和页面底部之间的距离。当距离底部10px或更小时，我将页脚的位置更改为block，这样它就不会重叠

---

关闭面板时，我会等待车身高度恢复到原始高度。当这种情况发生时，我将位置改回绝对位置。显然，您必须修改此选项以适应您的页面，但这个概念应该有效。

您已经在做必要的工作，以使其向上增长，绝对定位底部的页脚。现在发生了什么？是不是它长得太高了？如果是这样的话，是什么决定了页脚和页面内容之间有多少空间？是的，就像你在图片中看到的，页脚在切换时与内容重叠。我只是想把所有的事情都推到上面，但在下面，我真的不认为会有一个优雅的解决方案。您必须根据页脚的高度和它试图上升到上面的div的底部来调整页脚的底部位置。无论你做什么，当你改变底部位置时，都会有一个丑陋的跳跃效果。

$(document).ready(function () {
    var panelHeight = $("#panel").show().height(),
        docHeight = $(document).height(),
        panelToggle = false,
        maxTopOffset = $(".page").offset().top + $(".page").outerHeight();
    $("#panel").css("height","0px");
    $("#flip").click(function () {
        var targetHeight;
        if (panelToggle) {
            targetHeight = 0;
        } else {
            targetHeight = panelHeight;   
        }
        panelToggle = !panelToggle;
        $("#panel").finish().animate({
            height: targetHeight   
        },{
            step: function(height) {
                if (panelToggle) {
                    var distance = maxTopOffset - $(".footer").offset().top;                
                    if (distance > -10) {
                        $(".footer").css("position","relative");
                    }
                } else {
                    console.log(docHeight,$(document).height())
                    if ($(document).height() == docHeight) {
                        $(".footer").css("position","absolute");
                    }                    
                }

            },
            duration: 500
        });
    });
});