响应式菜单切换变为不可见(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>
更多推荐
发布评论