jQuery .slideToggle（）不工作

我想为我的网站构建一个移动友好的导航栏，我想使用菜单链接后滑下的菜单。我认为这会很简单，但它不起作用。当我点击链接“菜单”时，没有任何反应。它应该使用jQuery的.slideToggle功能来显示菜单。如果您可以提供修复或其他方法来制作响应性和移动友好的菜单。jQuery .slideToggle（）不工作

<script> 
$(document).ready(function(){ 

    $("#burger").click(function(){ 
     $("#menu").slideToggle(); 
    }); 
}); 
</script> 
<!-- END OF SCRIPTS --> 

<!-- HEADER --> 
<header> 
    <div id="top"> 
     <a href="#" id="logo"><img src="root/logo.png"></a> 

     <div id="burger"> 
      <a>Menu</a> 
     </div> 
    </div> 

    <nav id="navbar"> 
     <ul id="menu"> 
      <li><a href="#">Option 1</a></li> 
      <li><a href="#">Option 2</a></li> 
      <li><a href="#">Option 3</a></li> 
      <li><a href="#">Option 4</a></li> 
      <li><a href="#">Option 5</a></li> 
     </ul> 
    </nav> 
</header> 
<!-- END HEADER --> 
</body> 
</head>

这是我的CSS：

/* HEADER */ 
header { 
    width: 100%; 
    background-color: #012d5a; 
    height: 150px; 
} 

#top { 
    width: 80%; 
    margin-left: auto; 
    margin-right: auto; 
} 

#top img{ 
    height: 110px; 
    margin-left: 0px; 
} 

#navbar { 
    width: 100%; 
    height: 40px; 
    background-color: #B9E0F6; 
    display: block; 
    color: #000; 
    font-family: helvetica; 
    font-size: 16px; 
    font-weight: 600; 
} 

#menu { 
    display: block; 
    width: 600px; 
    margin: auto; 
    height: 40px; 
} 

#menu li { 
    float: left; 
    width: 120px; 
    display: inline; 
    padding-top: 10px; 
    height: 40px; 
    border-right: 2px solid #000; 
    box-sizing:border-box; 
    -moz-box-sizing:border-box; 
    -webkit-box-sizing:border-box; 
    text-align: center; 
} 

#menu li:last-child { 
    border-right: 0; 
} 

#burger { 
    display: none; 
    float: right; 
} 

/* Responsive Menu */ 
@media only screen and (max-device-width: 767px) { 
/* define mobile specific styles here */ 

#burger { 
    display: block; 
} 

#navbar { 
    height: auto; 
    position: relative; 
    z-index: 1; 
} 

#menu { 
    display: none; 
    height: 200px; 
    width: 100%; 
} 

#menu li { 
    display: block; 
    float: none; 
    width: 50%; 
    border: none; 
    margin: auto; 
} 

#top { 
    width: 100%; 
} 

}

来源

2015-06-21 The Gibbinold

究竟是什么问题？这工作不在哪里？ – vcanales

你想要的总是很难理解，你仍然可以删除显示：无汉堡div类。 – divy3993

当我点击菜单按钮，菜单不下来。它根本没有出现 –

你的菜单隐藏在CSS，试试这个来代替：

$("#burger").click(function(){ 
 
     $("#navbar").slideToggle(); 
 
    });

/* HEADER */ 
 
header { 
 
    width: 100%; 
 
    background-color: #012d5a; 
 
    height: 150px; 
 
} 
 

 
#top { 
 
    width: 80%; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 

 
#top img{ 
 
    height: 110px; 
 
    margin-left: 0px; 
 
} 
 

 
#navbar { 
 
    width: 100%; 
 
    height: 40px; 
 
    background-color: #B9E0F6; 
 
    display: block; 
 
    color: #000; 
 
    font-family: helvetica; 
 
    font-size: 16px; 
 
    font-weight: 600; 
 
} 
 

 
#menu { 
 
    display: block; 
 
    width: 600px; 
 
    margin: auto; 
 
    height: 40px; 
 
} 
 

 
#menu li { 
 
    float: left; 
 
    width: 120px; 
 
    display: inline; 
 
    padding-top: 10px; 
 
    height: 40px; 
 
    border-right: 2px solid #000; 
 
    box-sizing:border-box; 
 
    -moz-box-sizing:border-box; 
 
    -webkit-box-sizing:border-box; 
 
    text-align: center; 
 
} 
 

 
#menu li:last-child { 
 
    border-right: 0; 
 
} 
 

 
#burger { 
 
    float: right; 
 
    color: #B9E0F6; 
 
    margin-top: 24px; 
 
    font-size: 24px; 
 
    cursor: pointer; 
 
    text-decoration: underline; 
 
} 
 

 
/* Responsive Menu */ 
 
@media only screen and (max-device-width: 767px) { 
 
/* define mobile specific styles here */ 
 

 
#burger { 
 
    display: inline-block; 
 
} 
 

 
#navbar { 
 
    height: auto; 
 
    position: relative; 
 
    z-index: 1; 
 
} 
 

 
#menu { 
 
    display: none; 
 
    height: 200px; 
 
    width: 100%; 
 
} 
 

 
#menu li { 
 
    display: block; 
 
    float: none; 
 
    width: 50%; 
 
    border: none; 
 
    margin: auto; 
 
} 
 

 
#top { 
 
    width: 100%; 
 
} 
 

 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<html> 
 
<body> 
 
<!-- Scripts Here --> 
 
<script type = "text/javascript" src="script/jquery-2.1.4.min.js"></script> 
 
<script type = "text/javascript" src="script/bootstrap.min.js"></script> 
 
<!-- END OF SCRIPTS --> 
 

 
<!-- HEADER --> 
 
<header> 
 
    <div id="top"> 
 
     <div style="display:inline-block"> 
 
     <a href="#" id="logo"><img src="http://doc.jsfiddle.net/_images/jsfiddle-logo-thumb.png" /></a> 
 
     </div> 
 

 
     <div id="burger"> 
 
      <a>Menu</a> 
 
     </div> 
 
    </div> 
 

 
    <nav id="navbar"> 
 
     <ul id="menu"> 
 
      <li><a href="#">Option 1</a></li> 
 
      <li><a href="#">Option 2</a></li> 
 
      <li><a href="#">Option 3</a></li> 
 
      <li><a href="#">Option 4</a></li> 
 
      <li><a href="#">Option 5</a></li> 
 
     </ul> 
 
    </nav> 
 
</header> 
 
<!-- END HEADER -->

来源

2015-06-21 21:11:55 oMiKeY

Nah，这似乎没有太大影响，但感谢您尝试 –

jQuery .slideToggle（）不工作

回答

相关问题