javascript - 切换时 div 被另一个 div 插入

Question

我这里有两个导航栏。当我点击 menu-btn 时，侧边栏会滑入。但是侧边栏以某种方式将菜单栏向下推，我不明白为什么。如何让侧边栏停止插入菜单栏。任何提示将不胜感激。

    function main(){
            $(".menu-bar").hide();
            $(".menu-bar").fadeIn(300);
            $(".sidebar").hide();
            $(".dropdown-content").hide();

            $(".menu-btn").on('click',function(){
                $(".sidebar").animate({width:'toggle'});
                
            });
            $(".close-btn").on('click',function(){
                $(".sidebar").animate({width:'toggle'});
            });

            $(".login").on('click',function(){
                $(".dropdown-content").animate({width:'toggle'});
            });
        }
        $(document).ready(main)

   .sidebar{
    display:none;
    width:250px;
    background-color:#005777;
    z-index:1;
    padding-top:60px;
    height:100%;
    overflow:hidden;
    
    }
    .brand{
    font-family:ParmaPetit;
    font-size:50px;
    }
    .sidebar a, .login{
    text-decoration:none;
    padding: 8px 8px 8px 8px;
    display:block;
    font-size:30px;
    text-align:center;
    color:white;

    }
    .close-btn{
    position:relative;
    font-size:40px;
    float:right;
    bottom:50px;
    right:10px;
    color:white;
    }
    .sidebar a:hover, .login:hover, .close-btn:hover, .menu-btn:hover{
    color:#01af55;
    cursor:pointer;
    transition:0.3s;
    }
    .dropdown-content{
    background-color:#111111;
    position:relative;
    left:250px;
    bottom:29px;
    }
    .menu-bar{
    background-color:#005777;
    padding-bottom:10px;
    overflow:hidden;
    float:top;
    }
    .menu-btn{
    font-size:40px;
    cursor:pointer;
    color:white;
    position:relative;
    left:20px;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sidebar" id="sidebar">
        <span class="close-btn">&times;</span>
        <a href="#" class="brand" style="padding-bottom:50px;font-size:40px;">Airline Intel</a>
        <a href="#">Book Flight</a>
        <a href="#">Book Hotel</a>
        <div class="dropdown">
            <span class="login">Sign In &#x27A4;</span>
            <div class="dropdown-content">
                <a href="#">Admin</a>
                <a href="#">User</a>
                <a href="#">Register</a>
            </div>
        </div>
    </div>

    <div class="menu-bar" id="collapse">
        <span class="menu-btn">&#9776;</span>
    </div>

Answer 1

function main(){
            $(".menu-bar").hide();
            $(".menu-bar").fadeIn(300);
            $(".sidebar").hide();
            $(".dropdown-content").hide();

            $(".menu-btn").on('click',function(){
              $('#collapse').hide();
                $(".sidebar").animate({width:'toggle'});
                
            });
            $(".close-btn").on('click',function(){
            $('#collapse').show();
                $(".sidebar").animate({width:'toggle'});
            });

            $(".login").on('click',function(){
                $(".dropdown-content").animate({width:'toggle'});
            });
        }
        $(document).ready(main)

.sidebar{
    display:none;
    width:250px;
    background-color:#005777;
    z-index:1;
    padding-top:60px;
    height:100%;
    overflow:hidden;
    
    }
    .brand{
    font-family:ParmaPetit;
    font-size:50px;
    }
    .sidebar a, .login{
    text-decoration:none;
    padding: 8px 8px 8px 8px;
    display:block;
    font-size:30px;
    text-align:center;
    color:white;

    }
    .close-btn{
    position:relative;
    font-size:40px;
    float:right;
    bottom:50px;
    right:10px;
    color:white;
    }
    .sidebar a:hover, .login:hover, .close-btn:hover, .menu-btn:hover{
    color:#01af55;
    cursor:pointer;
    transition:0.3s;
    }
    .dropdown-content{
    background-color:#111111;
    position:relative;
    left:250px;
    bottom:29px;
    }
    .menu-bar{
    background-color:#005777;
    padding-bottom:10px;
    overflow:hidden;
    float:top;
    }
    .menu-btn{
    font-size:40px;
    cursor:pointer;
    color:white;
    position:relative;
    left:20px;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sidebar" id="sidebar">
        <span class="close-btn">&times;</span>
        <a href="#" class="brand" style="padding-bottom:50px;font-size:40px;">Airline Intel</a>
        <a href="#">Book Flight</a>
        <a href="#">Book Hotel</a>
        <div class="dropdown">
            <span class="login">Sign In &#x27A4;</span>
            <div class="dropdown-content">
                <a href="#">Admin</a>
                <a href="#">User</a>
                <a href="#">Register</a>
            </div>
        </div>
    </div>

    <div class="menu-bar" id="collapse">
        <span class="menu-btn">&#9776;</span>
    </div>

您需要在单击时隐藏菜单按钮。并在您点击关闭按钮时显示。