响应式菜单切换变为不可见(Responsive Menu toggle goes invisible)

响应式菜单切换变为不可见(Responsive Menu toggle goes invisible)

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

<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(); }); });

I wanted to toggle a responsive menu, upon the toggle and event function. The menu slides invisibly at the bottom of the page.

<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(); }); });

最满意答案

在您当前的代码中，您隐藏了所有的li ，因此当您切换ul的display时， 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";  
} 
  
<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> 
  
 
In your current code you are hiding all your lis, so when you toggle the display of the ul, the lis are still hidden. Remove the display:none; on the li and add it to the ul instead.
 
 
 
  
  
$(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>