javascript - 响应式菜单切换不可见

Question

我想根据切换和事件功能切换响应式菜单。菜单在页面底部无形地滑动。

<div class="header">
    <span class="navButton"></span>  
    <ul class="nav">  
        <li><a href="index.html">Home</a></li>  
        <li><a href="journey.html">The Journey</a></li>  
        <li><a href="getintouch.html">Get In Touch</a></li>  
    </ul>  
</div> 

CSS

.nav {  
         position: relative;  
         text-align: center;  
         width: 100%;  
         background-color: black;  
     }  
     .nav>li {  
         display: none;          
     }        
     .navButton{  
         display: block;  
         background-color: black;  
         color: white;  
         font-size: 40px;  
         text-align: center;  
         cursor: pointer;  
     }  
     .navButton:before {  
         content: "Menu";  
     }  

JavaScript

$(document).ready(function () {      
     $(".navButton").click(function () {          
         $(".nav").slideToggle();          
     });
});  

Answer 1

在您当前的代码中，您隐藏了所有的 li，因此当您切换 ul 的 display 时， li 仍然是隐藏的。删除 li 上的 display:none; 并将其添加到 ul 中。

$(document).ready(function () {      
     $(".navButton").click(function () {          
         $(".nav").slideToggle();          
     });
});  

.nav {  
   position: relative;  
   text-align: center;  
   width: 100%;  
   background-color: black;
   display:none;
}
.navButton{  
   display: block;  
   background-color: black;  
   color: white;  
   font-size: 40px;  
   text-align: center;  
   cursor: pointer;  
}  
.navButton:before {  
   content: "Menu";  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">
    <span class="navButton"></span>  
    <ul class="nav">  
        <li><a href="index.html">Home</a></li>  
        <li><a href="journey.html">The Journey</a></li>  
        <li><a href="getintouch.html">Get In Touch</a></li>  
    </ul>  
</div>