编程 Javascript

js实现简单的手风琴效果

Posted in Javascript onFebruary 27, 2017

效果图:

js实现简单的手风琴效果

图（1）初始图

js实现简单的手风琴效果

图（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>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持三水点靠木！

js实现简单的手风琴效果

- Author -

我本善良

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

js原生appendChild的bug解决心得分享

Jul 01 Javascript

jquery判断RadioButtonList和RadioButton中是否有选中项示例

Sep 29 Javascript

jquery append 动态添加的元素事件on 不起作用的解决方案

Jul 30 Javascript

关于两个jQuery(js)特效冲突的bug的解决办法

Sep 04 Javascript

bootstrap table操作技巧分享

Feb 15 Javascript

详解vue slot插槽的使用方法

Jun 13 Javascript

Vue.js弹出模态框组件开发的示例代码

Jul 26 Javascript

jquery的$().each和$.each的区别

Jan 18 jQuery

微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧滑动,右侧不动)

Jan 23 Javascript

小程序组件之自定义顶部导航实例

Jun 12 Javascript

基于Node.js搭建hexo博客过程详解

Jun 25 Javascript

vue中data改变后让视图同步更新的方法

Mar 29 Vue.js

jquery实现弹窗功能（窗口居中显示）

Feb 27 #Javascript

Bootstrap的popover(弹出框)在append后弹不出(失效)

Feb 27 #Javascript

jQuery实现简单弹窗遮罩效果

Feb 27 #Javascript

js 调用百度分享功能

Feb 27 #Javascript

Bootstrap的popover（弹出框）2秒后定时消失的实现代码

Feb 27 #Javascript

jQuery实现元素的插入

Feb 27 #Javascript

jQuery实现导航回弹效果

Feb 27 #Javascript