Question

点击导航菜单图标显示导航菜单时遇到了一些麻烦。

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

});

基本上，我有它，以便在较小的屏幕上显示时隐藏导航链接，但是当我点击切换图标时，我正在努力弄清楚如何让jQuery使其可见。我知道这是Bootstrap中的标准内容，但我正在构建的网站没有使用框架。

是否有人能够让我知道我做错了什么。

由于

Answer 1

display属性获取block，inline，inline-block和none值。要显示菜单，您应该更改此行：

$('#menu').css('display', 'visible');

致：

$('#menu').css('display', 'block');

此外，您可以使用toggle在每次点击时隐藏和显示菜单：

$('#menu').toggle();

有关使用toggle的更多信息： http://api.jquery.com/toggle/

Answer 2

您可以使用切换课程。定义了一个新的课程＆＃34;菜单＆＃34;可以切换为显示/隐藏菜单。煮熟你的代码，你可以用这个替换你现有的代码。

＆＃13;

$(document).ready(function(){

   $("#toggle").click(function(){
        $("#menu").toggleClass("menu");
    });

});

＆＃13;

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;}
  
    .menu {display:block!important;}
  }

＆＃13;

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <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>Menu</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>

＆＃13;

单击菜单后，使非引导导航栏扩展

2 个答案: