javascript - 当我在页脚上使用 slidetoggle 时，如何从顶部推送所有元素？

Question

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

这是第一个 View

这是点击黄色元素后的 View

我无法在 jsfiddle 上重现这个。这是我的 css、我的 js 和我的底部 html

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

这是我的底部 CSS，使用 LESS

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>   

Answer 1

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

http://jsfiddle.net/b6rkb/40/

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

它使用两种不同的技术。

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

关闭面板时，我等待 body 高度回到原来的高度。发生这种情况时，我将位置改回绝对位置。显然，您必须修改它以适合您的页面，但这个概念应该可行。