[英]js slideToggle doesn't work
我是js的新手,所以這可能是初學者的問題。
對於我的移動網站,我希望單擊頂部的菜單圖標時,菜單與slideToggle一起顯示。
這是我的HTML:
<html>
<head>
<meta charset='utf-8'>
<link rel="stylesheet" href="styles2.css">
<script src="script.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
<title>CSI - Home</title>
</head>
<body>
<a href="index.html"><img src="img/logo.png" alt="logo"/></a>
<div class="menu_icon"><img src="img/menu_icon.png" alt="menu_icon"/></div>
<div class="nav">
<nav>
<ul>
<li><a href="home.html"><img src="img/home.png" alt="home"/>Home_</a></li>
<li><a href="story.html"><img src="img/paper.png" alt="paper"/>Story_</a></li>
<li><a href="course.html"><img src="img/glass.png" alt="glass"/>Course_</a></li>
<li><a href="archive.html"><img src="img/archive.png" alt="archive"/>Archive_</a></li>
<li><a href="facebook.html"><img src="img/facebook.png" alt="facebook"/>Discuss with Facebook_</a></li>
<li><a href="twitter.html"><img src="img/twitter.png" alt="twitter"/>Discuss with Twitter_</a></li>
</ul>
</nav>
</div>
</body>
</html>
這是我的JavaScript:
$(document).ready(function(){
$(".menu_icon").on("click", function(){
$('.nav').slideToggle();
});
我希望.nav在單擊.menu_icon類/圖像時以slideToggle出現。
有人可以幫我嗎? 提前致謝! });
您忘了添加jQuery(就像Jeff Shaver注意到的那樣):添加
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
在腦海中加載jQuery庫。
而且,您忘記了關閉$(document).ready(function(){
和});
在代碼末尾(請參見trajce答案)。
有關工作示例,請參見此小提琴 。
假設<script src="script.js"></script>
是jquery庫,您好像忘了關閉$(document).ready
$(document).ready(function(){
$(".menu_icon").on("click", function(){
$('.nav').slideToggle();
});
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.