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>

Jquery的：

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

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

1 个答案: