js實(shí)現(xiàn)收縮菜單效果實(shí)例代碼
更新時(shí)間：2013年10月30日 15:23:08 作者：
這篇文章介紹了js實(shí)現(xiàn)收縮菜單效果實(shí)例代碼，有需要的朋友可以參考一下
廢話不多說,直接上代碼: 有注釋
復(fù)制代碼 代碼如下:
<head>
<title></title>
<style type="text/css">
div
{
border: 1px solid black;
width: 100px;
}
ul .tit, .content
{
list-style-type: none;
}
.menu
{
padding: 0px;
margin: 0px;
}
.tit
{
background-color:#0094ff;
color:White;
padding:2px 10px;
cursor:pointer;
}
</style>
<script src="js/jquery-1.9.0.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
//一開始直接隱藏菜單
$(".content").hide();
//給標(biāo)題添加點(diǎn)擊事件
$(".tit").click(function () {
//當(dāng)點(diǎn)擊的時(shí)候,打開菜單,同時(shí)其他的菜單隱藏
$(this).next().slideDown().parent().siblings().children(".content").slideUp();
}).first().next().slideDown();//默認(rèn)之后第一個(gè)菜單打開
});
</script>
</head>
<body>
<div>
<ul class="menu">
<li class="tit">菜單1</li>
<li class="content">
<ul>
<li>11111</li>
<li>11111</li>
<li>11111</li>
<li>11111</li>
</ul>
</li>
</ul>
<ul class="menu">
<li class="tit">菜單2</li>
<li class="content">
<ul>
<li>22222</li>
<li>22222</li>
<li>22222</li>
<li>22222</li>
</ul>
</li>
</ul>
<ul class="menu">
<li class="tit">菜單3</li>
<li class="content">
<ul>
<li>22222</li>
<li>22222</li>
<li>22222</li>
<li>22222</li>
</ul>
</li>
</ul>
</div>
</body>
您可能感興趣的文章:
相關(guān)文章
這篇文章介紹了GUID的幾種生成算法，有需要的朋友可以參考一下2013-08-08
Bootstrap Table可拖動(dòng)，需要用到它的Resizable擴(kuò)展插件，下面腳本之家小編給大家?guī)砹薆ootstrap Table列寬拖動(dòng)的方法，感興趣的朋友一起看看吧2018-08-08
javascript 用原型繼承來實(shí)現(xiàn)對象系統(tǒng)
對象系統(tǒng)中的繼承特性有三種方式:基于類，基于原型，基于元類2010-03-03
原生js實(shí)現(xiàn)文件上傳、下載、封裝等實(shí)例方法
在本篇文章里小編給各位整理的是關(guān)于原生js實(shí)現(xiàn)文件上傳、下載、封裝等實(shí)例方法，需要的朋友們可以參考學(xué)習(xí)下。2020-01-01
利用CSS、JavaScript及Ajax實(shí)現(xiàn)高效的圖片預(yù)加載
圖片預(yù)加載想必大家都不陌生吧，實(shí)現(xiàn)預(yù)加載圖片有很多方法，包括使用CSS、JavaScript及兩者的各種組合。這些技術(shù)可根據(jù)不同設(shè)計(jì)場景設(shè)計(jì)出相應(yīng)的解決方案，十分高效2013-10-10
javascript動(dòng)態(tài)添加單元格的腳本代碼
javascript動(dòng)態(tài)添加單元格的腳本代碼...2007-11-11
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)分頁查詢列表的模板，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
什么是函數(shù)式編程？根據(jù)百度百科的描述，“函數(shù)式編程是種編程典范，它將電腦運(yùn)算視為函數(shù)的計(jì)算。函數(shù)編程語言最重要的基礎(chǔ)是 λ 演算（lambda calculus）。而且λ演算的函數(shù)可以接受函數(shù)當(dāng)作輸入（參數(shù)）和輸出（返回值）。”2015-10-10
本文將詳細(xì)介紹一個(gè)可拖拽列寬表格實(shí)例,需要了解更多的朋友可以參考下2012-11-11
本文主要介紹了JS 異步遍歷的實(shí)現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04