当点击打开菜单时，菜单内容只显示50％的时间

Question

当我点击一个按钮时，我制作了一个菜单，其中的滑动条向下打开。然而，我的菜单的内容只显示了50％的时间......我真的不知道如何解决这个问题。 因此，基本上你点击打开的菜单，它显示正常，但当我关闭并重新打开它不显示我的内容...

我使用html，css和jquery获得此效果。

我做了一个codepen：Codepen

$(document).ready(function() { 
 

 
    var clicks = 0; 
 
    $('.menubutton-tablet').click(function() { 
 

 
    if (clicks % 2 == 0) { 
 

 
     $('.menu-collapse-tablet').animate({ 
 
     'height': '375px' 
 
     }, 500); 
 
     $('.navbar-ul-tablet').toggleClass('slideopen'); 
 
    } else { 
 

 
     $('.menu-collapse-tablet').animate({ 
 
     'height': '0px' 
 
     }, 500) 
 
     $('.navbar-ul-tablet').toggleClass('menutoggle'); 
 
    } 
 
    ++clicks 
 

 

 
    }); 
 
});

nav { 
 
    width: 100%; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    -webkit-flex-direction: column; 
 
    flex-direction: column; 
 
    background: black; 
 
    background-position: center; 
 
    display: flex; 
 
} 
 
.navbar-styles { 
 
    border-radius: 0px; 
 
    border-style: none; 
 
    border-color: none; 
 
    min-height: 100px; 
 
    margin-bottom: 0; 
 
    background-color: transparent; 
 
    width: 100%; 
 
    display: flex; 
 
    justify-content: space-between; 
 
} 
 
.headerlinks { 
 
    position: relative; 
 
    text-decoration: none; 
 
    list-style-type: none; 
 
    color: white; 
 
} 
 
.headerlogo { 
 
    width: 225px; 
 
    margin-left: 10%; 
 
    float: left; 
 
    position: relative; 
 
    display: inline; 
 
} 
 
.menubutton-tablet { 
 
    width: 100px; 
 
    height: 100px; 
 
    margin-top: 1%; 
 
    cursor: pointer; 
 
    color: white; 
 
} 
 
.menubutton-tablet:hover { 
 
    opacity: 0.8; 
 
} 
 
.menu-collapse-tablet { 
 
    display: flex; 
 
    width: 100%; 
 
    height: 0px; 
 
    justify-content: center; 
 
    background: transparent; 
 
} 
 
.navbar-ul-tablet { 
 
    display: none; 
 
    -webkit-align-items: center; 
 
    align-items: center; 
 
    -webkit-justify-content: center; 
 
    justify-content: center; 
 
    -webkit-flex-direction: column; 
 
    flex-direction: column; 
 
} 
 
.slideopen { 
 
    display: flex; 
 
} 
 
.menutoggle { 
 
    display: none; 
 
} 
 
.navbar-ul-tablet li { 
 
    text-decoration: none; 
 
    list-style-type: none; 
 
    font-size: 18px; 
 
    padding-top: 50px; 
 
    text-shadow: 3px 2px 4px rgba(0, 0, 0, 0.50); 
 
} 
 
.navbar-ul-tablet li:first-child { 
 
    padding-top: 10px; 
 
} 
 
.navbar-ul-tablet li:last-child { 
 
    padding-bottom: 20px; 
 
} 
 
.headerlinks { 
 
    color: white; 
 
    font-weight: 100; 
 
} 
 
.headerlinks:hover { 
 
    color: #d0021b; 
 
} 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
 
<nav> 
 
    <div class="navbar-styles"> 
 

 
    <a href="index.php"> 
 
     <img class="headerlogo" src="images/mobilelogo2.png" /> 
 
    </a> 
 
    <p class="menubutton-tablet">Open Menu</p> 
 

 
    </div> 
 

 
    <div class="menu-collapse-tablet"> 
 
    <ul class="navbar-ul-tablet"> 
 
     <li><a class="headerlinks" href="assortiment.php">ASSORTIMENT</a> 
 
     </li> 
 
     <li><a class="headerlinks" href="overons.php">OVER ONS</a> 
 
     </li> 
 
     <li><a class="headerlinks" href="webshop.php">WEBSHOP</a> 
 
     </li> 
 
     <li><a class="headerlinks" href="#">LOGIN</a> 
 
     </li> 
 
     <li><a class="headerlinks" href="contact.php">CONTACT</a> 
 
     </li> 
 

 

 
    </ul> 
 
    </div> 
 
</nav>

Answer 1

你需要改变你的代码：

$('.menu-collapse-tablet').animate({'height': '0px'}, 500) 
$('.navbar-ul-tablet').toggleClass('menutoggle'); 

这一个：

$('.menu-collapse-tablet').animate({'height': '0px'}, 500) 
$('.navbar-ul-tablet').toggleClass('slideopen'); 

Answer 2

你有因为低于行代码的这个问题。

if(clicks % 2 == 0){ 
$('.menu-collapse-tablet').animate({'height': '375px'}, 500); 
$('.navbar-ul-tablet').toggleClass('slideopen'); 
} 

你跟踪的点击而当点击甚至你是显示菜单否则你设置height:0px。