js實現(xiàn)收縮菜單效果實例代碼
更新時間：2013年10月30日 15:23:08 作者：
這篇文章介紹了js實現(xiàn)收縮菜單效果實例代碼，有需要的朋友可以參考一下
廢話不多說,直接上代碼: 有注釋
復(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();
//給標題添加點擊事件
$(".tit").click(function () {
//當點擊的時候,打開菜單,同時其他的菜單隱藏
$(this).next().slideDown().parent().siblings().children(".content").slideUp();
}).first().next().slideDown();//默認之后第一個菜單打開
});
</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)文章
JavaScript中的await函數(shù)使用小結(jié)
async 函數(shù)是 AsyncFunction 構(gòu)造函數(shù)的實例,并且其中允許使用 await 關(guān)鍵字,async 和 await 關(guān)鍵字讓我們可以用一種更簡潔的方式寫出基于 Promise 的異步行為,而無需刻意地鏈式調(diào)用 promise,這篇文章主要介紹了JavaScript中的await,需要的朋友可以參考下2024-01-01
這篇文章主要為大家詳細介紹了JS面向?qū)ο髮崿F(xiàn)飛機大戰(zhàn)，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08
Bootstrap中表單控件狀態(tài)(驗證狀態(tài))
這篇文章主要介紹了Bootstrap中表單控件狀態(tài)(驗證狀態(tài)) 的相關(guān)資料,還給大家介紹了在Bootstrap框架中提供的機制驗證效果，非常不錯，需要的朋友可以參考下2016-08-08
Bootstrap每天必學(xué)之按鈕組工具欄，本文講解的就是大家最為常用的按鈕組工具欄，感興趣的小伙伴們可以參考一下2015-11-11
這篇文章主要介紹了js實現(xiàn)多選項切換導(dǎo)航菜單的方法,可實現(xiàn)動態(tài)生成多選項切換導(dǎo)航菜單的功能,是非常實用的技巧,需要的朋友可以參考下2015-02-02
這篇文章主要給大家介紹了關(guān)于Require.JS中幾種define定義方式的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家具有一定的參考學(xué)習價值，需要的朋友們下面來一起看看吧。2017-06-06
websocket是H5才開始提供的一種在單個TCP連接上進行全雙工通訊的協(xié)議,下面這篇文章主要給大家介紹了關(guān)于JS前端中WebSocket使用的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-03-03
屏蔽鼠標右鍵、Ctrl+N、Shift+F10、Alt+F4、F11、F5刷新、退格鍵
js 防止刷新網(wǎng)頁、禁止后退,右鍵等操作的代碼2010-03-03
詳解webpack+ES6+Sass搭建多頁面應(yīng)用
這篇文章主要介紹了webpack+ES6+Sass搭建多頁面應(yīng)用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
本文主要介紹了原生Javascript插件開發(fā)的思路分析以及使用示例。具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01