CSS+jQuery實(shí)現(xiàn)簡(jiǎn)單的折疊菜單
更新時(shí)間：2016年12月20日 10:14:24 作者：筱葭
這篇文章主要介紹了CSS+jQuery實(shí)現(xiàn)簡(jiǎn)單的折疊菜單的代碼，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧
廢話不多說了，直接給大家貼代碼了，具體代碼如下所示：
<!DOCTYPE html>
<html>
<head>
<title>折疊菜單</title>
<style>
body{
background:grey;
font-family:Microsoft Yahei;
color:white;
}
.types a{
text-decoration:none;
color:white;
}
.types ul{
display:none;
}
.files ul{
display:none;
}
</style>
<script src="js/jquery-1.8.2.min.js"></script>
<script>
$(document).ready(function(){
var span=$(".files").find("span");
var ul=$(".files").find("ul");
span.bind("click",function(){
ul.each(function(){
$(this).css("display","none");
});
$(this).next().css("display","block");
});
});
</script>
</head>
<body>
<ul class="files">
<li class="file">
<span>文件2-1</span>
<ul>
<li class="document"><a href="#">文檔2-1-1</a></li>
<li class="document"><a href="#">文檔2-1-2</a></li>
</ul>
</li>
<li class="file">
<span>文件2-2</span>
<ul>
<li class="document"><a href="#">菜單2-2-1</a></li>
<li class="document"><a href="#">菜單2-2-2</a></li>
</ul>
</li>
<li class="file">
<span>文件2-3</span>
<ul>
<li class="document"><a href="#">菜單2-3-1</a></li>
<li class="document"><a href="#">菜單2-3-2</a></li>
</ul>
</li>
</ul>
</body>
</html>
以上所述是小編給大家介紹的CSS+jQuery實(shí)現(xiàn)簡(jiǎn)單的折疊菜單，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要介紹了jQuery常見的遍歷DOM操作,結(jié)合實(shí)例形式詳細(xì)分析了針對(duì)DOM節(jié)點(diǎn)的parent()、parents()、parentsUntil()、find()、eq()、filter()等各種遍歷操作相關(guān)函數(shù)與使用技巧,需要的朋友可以參考下2018-09-09
JQuery 自定義CircleAnimation，Animate方法學(xué)習(xí)筆記
最近對(duì)看了一些JQuery的基礎(chǔ)教程，被JQuery深深的吸引住了，以前用過Extjs，看了JQuery不禁感嘆，javascript還能這么些，真是太神奇了！2011-07-07
使用jQuery插件創(chuàng)建常規(guī)模態(tài)窗口登陸效果
隱藏模態(tài)窗口技術(shù)是一種很好的解決方案，用于處理不是特有必要出現(xiàn)在網(wǎng)頁(yè)上的界面元素，下面與大家分享下如何利用jQuery插件leanModal建立一個(gè)常規(guī)模態(tài)窗口2013-08-08
json文件是一種輕量級(jí)的數(shù)據(jù)交互格式。一般在jquery中使用getJSON()方法讀取，具體示例代碼如下，感興趣的朋友可以參考下哈，希望可以幫助到你2013-05-05
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)聊天機(jī)器人，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-02-02
淺談jQuery.easyui的datebox格式化時(shí)間
這篇文章主要介紹了淺談jQuery.easyui的datebox格式化時(shí)間的方法,需要的朋友可以參考下2015-06-06
JQuery實(shí)現(xiàn)文字無縫滾動(dòng)效果示例代碼(Marquee插件)
本篇文章主要介紹了JQuery實(shí)現(xiàn)文字無縫滾動(dòng)效果示例代碼(Marquee插件)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-03-03
jQuery.Validate 使用筆記(jQuery Validation范例 )
學(xué)習(xí)jQuery Validation，于是手寫一公共范例，并收藏以便后用,里面附有測(cè)試代碼，需要的朋友一起來測(cè)試。2010-06-06
幻燈片效果通常用于展示相冊(cè)圖片或特色推薦內(nèi)容。一個(gè)漂亮的幻燈片更能吸引訪客的注意力。本文里面，收集了15款jquery幻燈片插件，讓你的圖片展示更漂亮，讓你的特色內(nèi)容更吸引人。2011-04-04
這篇文章主要介紹了jquery的方法屬性,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2021-11-11