我在點擊導航菜單圖標顯示導航菜單時遇到了一些麻煩。在菜單點擊後製作非bootstrap導航欄
HTML
nav role="navigation" class="navbar">
<div class="nav-header">
<a href="#"><span style="font-family: 'Cabin Sketch', cursive; font-size: 1.4em;">Testy Testy Web</span></a>
<a href="#menu" id="toggle"><span><i class="fa fa-bars"></i></span></a>
</div>
<div id="menu">
<ul>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#pricing">Pricing</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</nav>
CSS
nav {width: 100%; position: fixed; text-align: left; background-color: #404040; z-index: 999;}
nav ul li {display: inline;}
nav a {text-decoration: none; float: left; color: white; padding: 1em; line-height: 100%;}
nav a:hover {background-color: #1AA2D4;}
.nav-header a {display: inline-block;}
#toggle {float: right; display: none;}
@media (max-width: 592px) {
.splash p {font-size: 1em;}
.splash h1 {font-size: 8em;}
nav {width: 100%; position: fixed; top: 0; text-align: left; background-color: #404040; z-index: 999;}
nav ul li {display: block; float: left; clear: left; width: 100%; clear: bottom;}
nav ul {width: 100%;}
nav a {text-decoration: none; float: left; color: white; padding: 1em; line-height: 100%;}
#toggle {float: right; display: block;}
#menu {display: none;}
的JavaScript/jQuery的
$(document).ready(function(){
$('#toggle').click(function(){
$('#menu').css('display', 'visible');
});
});
基本上,我有它即T他的導航鏈接在小屏幕上顯示時是隱藏的,但是我正在努力弄清楚如何讓jQuery在點擊切換圖標時可見。我知道這是Bootstrap中的一個標準,但我構建的網站並未使用框架。
有人能夠讓我知道我做錯了什麼。
感謝
你試過'$( '#菜單')。顯示()'? –
$('#menu').css('display','visible'); - 沒有可見的顯示值 - 在這裏檢查 - http://www.w3schools.com/cssref/pr_class_display.asp - 你可以做 - $('#menu')。css('display' , '沒有'); - 隱藏 - $('#menu')。css('display',''); - 顯示 – Tasos