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，因此当您切换display的{{1}}时，ul仍然隐藏。移除li上的display:none;，然后将其添加到li。

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";  
}

Answer 2

确保已链接脚本标记。只需改变这个

.nav {  
     position: relative;  
     text-align: center;  
     width: 100%;  
     background-color: black;  
 }  
 .nav>li {  
     display: none;          
 }

与

.nav { 
 position: relative;
 display:none;
 background-color: #000;
 text-align: center; 
 width:100%; 

}

响应式菜单切换变为不可见

2 个答案: