原生态js展开收缩

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />

    <title>Document</title>

    <style type="text/css">

        *{margin: 0; padding: 0;}

        body{max-width: 640px; margin: 0 auto; background-color: #ddd;}

        a{text-decoration: none; color: #333;}

        .public_header{ height: 40px; line-height: 40px; border-bottom:1px solid #ebebeb; position: relative; background-color: #fff; }

        .ph_icon_menu{ position: absolute; right: 0;top:0;width: 40px; height: 40px; display: block;}

        .ph_icon_menu i{display: block;border-color:#f60;border-width:3px 0;border-style: solid;width: 20px;height:11px;margin:11px auto 0;position: relative;}

        .ph_icon_menu i:before{content: "";position: absolute;left:0;top:4px;width: 20px;height:3px;background-color:#f60;}

        .nav{ background-color: #fff; overflow: hidden; display: none; }

        .nav a{ width: 25%; float: left; display: block; height: 30px; line-height: 30px; box-sizing: border-box; border-right: 1px solid #ebebeb; border-bottom: 1px solid #ebebeb; text-align: center; font-weight: 700; font-size: 14px;}

        .red{ color: red;  text-align: center; margin-top: 150px; }

    </style>

</head>

<body>

<div class="public_header"><a href="javascript:;" class="ph_icon_menu"  onclick="menuShowHide();"><i></i></a></div>

<div class="nav" id="J_menu_content">

    <a href="#">1</a>

    <a href="#">2</a>

    <a href="#">3</a>

    <a href="#">4</a>

    <a href="#">5</a>

    <a href="#">6</a>

    <a href="#">7</a>

    <a href="#">8</a>

</div>

<script type="text/javascript">

    //第一种写法

    // var obj = document.getElementById("J_menu_content");

    // function menuShowHide() {

    //     if (obj.style.display == "block") {

    //         obj.style.display = "none";

    //     }else{

    //         obj.style.display ="block";

    //     }

    // }

    //第二种写法

    var type = 1;

    var obj = document.getElementById('J_menu_content');

    function menuShowHide() {

        if (type) {

            obj.style.display="block";

            type = 0;

        }else {

            obj.style.display="none";

            type = 1;

        }

    }

</script>

<p class="red">注意：a标签要加上javascript:;才可以点击出效果</p>

</body>

</html>

效果如图：

展开后：

如果文章中有不对之处，随时欢迎您的纠正~~

原生态js展开收缩的更多相关文章

js 展开&收缩二种
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
原生态js展开高度自适应100%
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
js实现的侧边栏展开收缩效果
原文地址:http://www.softwhy.com/forum.php?mod=viewthread&tid=12246 <!DOCTYPE html> <html> ...
jQuery弹性展开收缩菜单插件gooey.js
分享一款基于jQuery弹性展开收缩菜单插件gooey.js.这是一款基于gooey.js插件实现的弹性菜单特效代码.效果图如下: 在线预览源码下载实现的代码. html代码: <hea ...
右上角鼠标滑过展开收缩动画效果js代码的演示页面
http://files.cnblogs.com/files/tanlingdangan/top_right.rar.gz 右上角鼠标滑过展开收缩动画效果js代码的演示页面http://www.51x ...
js之展开收缩菜单，用到window.onload ,onclick,
目标效果:点击标签1,如果列表标签的style的display是block,改成none,否则改成block,来达到展开收缩菜单效果一.准备阶段 html文件 <!DOCTYPE html&g ...
SlickGrid example 5:带子项的展开收缩
带子项的展开收缩. 代码: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Ty ...
HTML5每日一练之details展开收缩标签的应用
details标签的出现,为我们带来了更好的用户体验,不必为这种收缩展开的效果再编写JS来实现.注:目前仅Chrome支持此标签. details有一个新增加的子标签——summary,当鼠标点击su ...
WordPress文章页添加展开/收缩功能
很多时候我们在WordPress上发布一些文章的时候里面都包含了很多的代码,我一般又不喜欢把代码压缩起来而喜欢让代码格式化显示,但是格式化显示通常会让文章内容看起来很多,不便于访问者浏览,所以今天就介 ...

随机推荐

python操作符重载
操作符重载的魔术方法操作符方法取反即席 + __add__ __radd__ __iadd__ - __sub__ __rsub__ __isub__ * __mul__ __rmul__ _ ...
c# vs c++
[c# vs c++] 1.在 C++ 中,类和结构实际上是相同的,而在 C# 中,它们很不一样.C# 类可以实现任意数量的接口,但只能从一个基类继承.而且,C# Struct不支持继承,也不支持显式 ...
【POJ1811】Prime Test
[题目大意] 若n是素数,输出“Prime”,否则输出n的最小素因子,(n<=2^54) [题解] 和bzoj3667差不多,知识这道题没那么坑. 直接上Pollord_Rho和Rabin_Mi ...
EXADATA智能扫描
提要:查询特定的要求:智能扫描只可用于完整的表或索引扫描.智能扫描只能用于直接路径读取: 直接路径读取会自动用于并行查询. 直接路径读取可以用于串行查询.默认情况下不使用它们进行小型表的串行扫描.使用 ...
2-R型聚类
将相似的属性聚合在一起 clc, clear; % a = load('E:\a-建模\<数学建模算法与应用>课件资源\数学建模算法与应用\程序及数据\10第10章\gj.txt'); a ...
shiro 集成spring 使用 redis作为缓存学习记录（六）
1.在applicationContext-redis.xml配置文件中增加如下: 申明一个cacheManager对象用来注入到 shiro的 securityManager 属性 cac ...
SQL 数据库学习 005 学习必备的一些操作 --- 如何新建数据库如何附加和分离数据库（如何备份还原数据库）如何删除数据库
我的电脑系统: Windows 10 64位使用的SQL Server软件: SQL Server 2014 Express 如果我们要学习这个数据库,我们需要学习什么知识.比如:如何新建一个数据库 ...
修改字符集AL32UTF8修改为ZHS16GBK详解
登陆sqlplus,在命令行输入 sqlplus sys/sys as sysdba;//登陆sqlplus SQL>SHUTDOWN IMMEDIATE; SQL>STARTUP MOU ...
code3027 线段覆盖2
dp 数据:d[i].a d[i].b d[i].v 分别表示第i条线段的起始点,结束点,价值先按d[i].b排好序 dp[i]表示前i条线段的最大价值方程: dp[i]=max{ dp[i-1] ...
Photo4
Story: 我手捧玫瑰,一个人,走在桥上.桥下是波澜壮阔的大海,一不小心,我就有失足的危险.海鸟的低鸣在我耳际盘旋着,浪汹涌,仿佛要把我吞噬掉.你也许奇怪,为何我一人手捧玫瑰走在桥上.只因,女骑从来 ...

原生态js展开收缩

原生态js展开收缩的更多相关文章

随机推荐

热门专题