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