Contoh dalam artikel ini menerangkan kod kesan menu gelongsor paling mudah yang dilaksanakan oleh jquery. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:
Ini adalah menu lungsur jQuery yang paling mudah, pelaksanaan kod jQuery, tidak terlalu banyak untuk mengubah suai menu, hanya beberapa pelaksanaan asas, terutamanya ia adalah contoh rujukan yang baik untuk pembelajaran jQuery, di sini digunakan Perpustakaan pakej jquery fail jquery.tools.min.js diimport dari luar Semasa ujian, kesannya mungkin tidak dapat dilihat kerana tidak berjaya memuatkan halaman web boleh menyelesaikan masalah ini.
Tangkapan skrin kesan berjalan adalah seperti berikut:
Alamat demo dalam talian adalah seperti berikut:
http://demo.jb51.net/js/2015/jquery-simple-nav-cha-menu-style-codes/
Kod khusus adalah seperti berikut:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>下拉滑出的菜单</title>
<script src="jquery.tools.min.js"></script>
<script type="text/javascript">
$(function() {
$("#list li").hover(function() {
$(this).children("ul").slideDown();
}, function() {
$(this).children("ul").slideUp();
});
});
</script>
<style type="text/css">
*{margin:0;padding:0;}
ul{list-style:none outside none}
#list{font-size:14px;width:500px;margin:55px auto}
#list ul{font-size:12px;display:none}
#list .li{float:left;width:100px;margin-right:1px;background:orange}
</style>
</head>
<body>
<ul id="list">
<li class="li">
<a href="#">游戏</a>
<ul>
<li><a href="#">单机游戏</a></li>
<li><a href="#">网络游戏</a></li>
</ul>
</li>
<li class="li">
<a href="#">音乐</a>
<ul>
<li><a href="#">流行歌曲</a></li>
<li><a href="#">摇滚</a></li>
</ul>
</li>
<li class="li">
<a href="#">编程语言</a>
<ul>
<li><a href="#">Javascript</a></li>
<li><a href="#">PHP</a></li>
</ul>
</li>
</ul>
</body>
</html>
Saya harap artikel ini akan membantu pengaturcaraan jQuery semua orang.
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
