js實(shí)現(xiàn)簡(jiǎn)單的手風(fēng)琴效果

更新時(shí)間：2017年02月27日 16:01:22 作者：我本善良

本文主要介紹了js實(shí)現(xiàn)簡(jiǎn)單手風(fēng)琴效果的實(shí)例，具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧

效果圖:

圖（1）初始圖

圖（2）點(diǎn)擊展開效果

代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
<style type="text/css">
*{margin:0;padding:0;font-size:12px;list-style:none;}
.menu{margin:50px auto;width:210px;border:1px solid #ccc;}
.menu p{height:25px;line-height:25px;background:#eee;font-weight:bold;border-bottom:1px solid #ccc;text-indent:20px;cursor:pointer;}
.menu div ul{display:none;}
.menu li{height:24px;line-height:24px;text-indent:20px;}
</style>
<script type="text/javascript">
 window.onload=function(){
 var menu=document.getElementById("menu");
 var ps=menu.getElementsByTagName("p");
 var uls=menu.getElementsByTagName("ul");
 for(var i in ps){
 ps[i].id=i;
 ps[i].onclick=function(){
 var u=uls[this.id];
 if (u.style.display=='block'){
 u.style.display="none";
 }else{
 u.style.display="block";
 }
 } 
 } 
 }
</script>
</head>
<body>
 <div class="menu" id="menu">
 <div>
 <p>Web前端</p>
 <ul style="display:block">
 <li>JavaScript</li>
 <li>DIV+CSS</li>
 <li>JQuary</li>
 </ul>
 </div>
 <div>
 <p>后臺(tái)腳本</p>
 <ul>
 <li>PHP</li>
 <li>ASP.net</li>
 <li>JSP</li>
 </ul>
 </div>
 <div>
 <p>前端框架</p>
 <ul>
 <li>Extjs</li>
 <li>Esspress</li>
 <li>YUI</li>
 </ul>
 </div>
 </div>
</body>
</html>

以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

如何讓easyui gridview 寬度自適應(yīng)窗口改變及fitColumns應(yīng)用
在使用Easyui GridView時(shí)，如果要Gridview的寬度和窗口的寬度相同，只需要設(shè)置fitColumns: true即可,感興趣的你不要走開啊，接下來(lái)為您詳細(xì)介紹
2013-01-01
JavaScript canvas仿代碼流瀑布
這篇文章主要為大家詳細(xì)介紹了JavaScript canvas仿代碼流瀑布，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-02-02
使用threejs實(shí)現(xiàn)第一人稱視角的移動(dòng)的問(wèn)題(示例代碼)
第一人稱視角的場(chǎng)景巡檢主要需要解決兩個(gè)問(wèn)題，人物在場(chǎng)景中的移動(dòng)和碰撞檢測(cè)。移動(dòng)與碰撞功能是所有三維場(chǎng)景首先需要解決的基本問(wèn)題，今天我們就通過(guò)最基本的threejs來(lái)完成第一人稱視角的場(chǎng)景巡檢功能，感興趣的朋友一起看看吧
2022-02-02
基于Bootstrap的Metronic框架實(shí)現(xiàn)條碼和二維碼的生成及打印處理操作
這篇文章主要介紹了基于Bootstrap的Metronic框架實(shí)現(xiàn)條碼和二維碼的生成及打印處理操作的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-08-08
JavaScript樹形組件實(shí)現(xiàn)無(wú)限級(jí)樹形結(jié)構(gòu)
這篇文章主要介紹了JavaScript樹形組件實(shí)現(xiàn)無(wú)限級(jí)樹形結(jié)構(gòu)，一種構(gòu)建多級(jí)有序樹形結(jié)構(gòu)JSON（或XML）數(shù)據(jù)源的方法，下面更多相關(guān)資料需要的小伙伴可以參考一下
2022-03-03
淺析JS原始值和引用值問(wèn)題
如果一個(gè)值是引用類型的，那么它的存儲(chǔ)空間將從堆中分配。由于引用值的大小會(huì)改變，所以不能把它放在棧中，否則會(huì)降低變量查尋的速度。相反，放在變量的?？臻g中的值是該對(duì)象存儲(chǔ)在堆中的地址，這篇文章主要介紹了JS原始值和引用值 ,需要的朋友可以參考下
2021-12-12
JS判斷數(shù)據(jù)類型的常用方法匯總
判斷數(shù)據(jù)類型是JavaScript面試時(shí)常常遇到的問(wèn)題，本文為大家總結(jié)了幾種常用的方法，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以了解一下
2023-06-06
用js判斷輸入是否為中文的函數(shù)
本篇文章主要是對(duì)js判斷輸入是否為中文的函數(shù)進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
2014-03-03
JavaScript實(shí)現(xiàn)簡(jiǎn)易聊天對(duì)話框(加滾動(dòng)條)
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡(jiǎn)易聊天對(duì)話框，附加滾動(dòng)條功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-02-02
JavaScript console對(duì)象與控制臺(tái)使用示例詳解
這篇文章主要介紹了JavaScript console對(duì)象與控制臺(tái)的使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧
2022-10-10