javascript - 当顶部横幅展开时让网站缩小

Question

我的网站顶部有一个横幅，其中包含一些联系信息。当用户单击该栏时，该栏会展开并显示其内容。但是扩展后的div显示在网站上，网站是否可以随着div扩展？这样网站的顶部就从展开的 div 开始。

我尝试通过给 div 我使用 position: relative，但这没有做任何事情。

我的代码:

HTML:

<div class="bannertop">
    <div id="cont">
        <a href="#" id="buttonphone"><i class="fa fa-chevron-down telefoontje" aria-hidden="true"></i></a>
        <ul class="bannertopcontact">
            <li class="banneritem">
                <a style="color:#fff;" href="tel:+2523532523532"><i class="fa fa-phone" aria-hidden="true"></i>352353252</a>
            </li>
             <li class="banneritem">
                <a style="color:#fff;" href="mailto:info@website.nl"><i class="fa fa-envelope" aria-hidden="true"></i> info@website.nl</a>
            </li>
             <li class="banneritem">
                <a style="color:#fff;" href="contact.php"><i class="fa fa-external-link" aria-hidden="true"></i> Contactpagina</a>
            </li>
        </ul>
    </div>      
</div>

J查询:

<script>
    $(document).ready(function()
    {
        $.fn.animateRotate = function(angle, duration, easing, complete) {
            var args = $.speed(duration, easing, complete);
            var step = args.step;
            return this.each(function(i, e) {
                args.step = function(now) {
                    $.style(e, 'transform', 'rotate(' + now + 'deg)');
                    if (step) return step.apply(this, arguments);
                };

                $({deg: 0}).animate({deg: angle}, args);
            });
        };

        $("#buttonphone").click(function(){

           if (!$(this).hasClass("expanded")){
              $("#cont").animate({height: '160px',},340);
              $('.telefoontje').animate({ marginTop: "140px" }, 300)
              $(".telefoontje").animateRotate(180, 400, "linear", function(){
                });
              $(this).addClass("expanded");
           }
           else {
              $("#cont").animate({height: '35px',},300);
              $('.telefoontje').animate({ marginTop: "10px" }, 300)
              $(".telefoontje").animateRotate(-180, 400, "linear", function(){
                });
              $(this).removeClass("expanded");
           }
        });
    });
</script>

最后是一些 CSS:

.bannertop{
    font-size: 15px;
    height:40px;
    text-align:center;
    display: none;
    position:relative;
    z-index:999999999999999999!important;
}

.telefoontje{
    color: #fff;
    display:inline-block;
    margin-top:10px;
    position:absolute;
    font-size: 16px!important;
    z-index:999999999999999999;
}

.bannertopcontact{
    list-style: none;   
    color: #fff;
    margin-top:30px;
    z-index:999999999999999999!important;
}

.banneritem{
    margin-top:13px;    
}

#cont{
    background-color:#85BD3E;
    height: 35px;   
    overflow:hidden;
    z-index:999999999999999999!important;
    position:relative;
}

Answer 1

我简化了代码，只保留一个 slideToggle() 动画。然后我删除了代码中无用的高值 z-index 并尽量保持它尽可能简单。

$("#buttonphone").click(function(){
  $('.bannertopcontact').slideToggle();
});

.bannertop{
    font-size: 15px;
    text-align:center;
}

.telefoontje{
    color: #fff;
    display:inline-block;
    margin-top:10px;
    font-size: 16px;
}

.bannertopcontact{
    list-style: none;   
    color: #fff;
    padding-left: 0;
    margin: 0; 
    display: none;
    padding-bottom: 30px;
}

.banneritem{
    margin-top:13px;    
}

#cont{
    background-color:#85BD3E;
}

#buttonphone { 
  padding: 15px 0; display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="bannertop">
    <div id="cont">
        <a href="#" id="buttonphone">button</a>
        <ul class="bannertopcontact">
            <li class="banneritem">
                <a style="color:#fff;" href="tel:+2523532523532"><i class="fa fa-phone" aria-hidden="true"></i>352353252</a>
            </li>
             <li class="banneritem">
                <a style="color:#fff;" href="mailto:info@website.nl"><i class="fa fa-envelope" aria-hidden="true"></i> info@website.nl</a>
            </li>
             <li class="banneritem">
                <a style="color:#fff;" href="contact.php"><i class="fa fa-external-link" aria-hidden="true"></i> Contactpagina</a>
            </li>
        </ul>
    </div>      
</div>
<p id="content">website content website content website content website content website content website content website content website content website content website content website content website content website content website content website content website content website content website content website content website content website content website content website content website content website content website content website content website content website content website content website content website content website content website content website content website content website content website content website content website content website content website content website content website content website content website content  </p>