<!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展开收缩的更多相关文章

  1. js 展开&收缩 二种

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 原生态js展开高度自适应100%

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. js实现的侧边栏展开收缩效果

    原文地址:http://www.softwhy.com/forum.php?mod=viewthread&tid=12246 <!DOCTYPE html> <html> ...

  4. jQuery弹性展开收缩菜单插件gooey.js

    分享一款基于jQuery弹性展开收缩菜单插件gooey.js.这是一款基于gooey.js插件实现的弹性菜单特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <hea ...

  5. 右上角鼠标滑过展开收缩动画效果js代码的演示页面

    http://files.cnblogs.com/files/tanlingdangan/top_right.rar.gz 右上角鼠标滑过展开收缩动画效果js代码的演示页面http://www.51x ...

  6. js之展开收缩菜单，用到window.onload ,onclick,

    目标效果:点击标签1,如果列表标签的style的display是block,改成none,否则改成block,来达到展开收缩菜单效果 一.准备阶段 html文件 <!DOCTYPE html&g ...

  7. SlickGrid example 5:带子项的展开收缩

    带子项的展开收缩.   代码: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Ty ...

  8. HTML5每日一练之details展开收缩标签的应用

    details标签的出现,为我们带来了更好的用户体验,不必为这种收缩展开的效果再编写JS来实现.注:目前仅Chrome支持此标签. details有一个新增加的子标签——summary,当鼠标点击su ...

  9. WordPress文章页添加展开/收缩功能

    很多时候我们在WordPress上发布一些文章的时候里面都包含了很多的代码,我一般又不喜欢把代码压缩起来而喜欢让代码格式化显示,但是格式化显示通常会让文章内容看起来很多,不便于访问者浏览,所以今天就介 ...

随机推荐

  1. MySQL内置功能之事务、函数和流程控制

    主要内容: 一.事务 二.函数 三.流程控制 1️⃣  事务 一.何谓事务? 事务用于将某些操作的多个SQL作为原子性操作,一旦有某一个出现错误,即可回滚到原来的状态,从而保证数据库数据完整性. # ...

  2. ShaderLab内置变量

    [ShaderLab内置变量]

  3. Lambert模型

    [Lambert模型] 漫反射光的强度近似地服从于Lambert定律,即漫反射光的光强仅与入射光的方向和反射点处表面法向夹角的余弦成正比. 由此可以构造出Lambert漫反射模型:Idiffuse = ...

  4. Scala基础：模式匹配和样例类

    模式匹配 package com.zy.scala import scala.util.Random /** * 模式匹配 */ object CaseDemo { def main(args: Ar ...

  5. 通过args数组获取数据

    ----------siwuxie095                     通过 main 方法的 args数组 可以从控制台获取一组字符串数据     如:     package com.s ...

  6. 关于java是值传递还是引用传递

    一.概念 实际上对这两种传递方式,知乎上有个回答说得很好: 值传递和引用传递,属于函数调用时参数的求值策略(Evaluation Strategy),这是对调用函数时,求值和传值的方式的描述,而非传递 ...

  7. linux系统启动过程及运行等级详解

    一.启动过程 1. 开机流程简述 1)加载BIOS硬件信息,并获取第一个启动设备的代号 2)读取第一个启动设备的MBR的引导加载程序的启动信息 3)加载核心操作系统的核心信息,核心开始解压缩,并且尝试 ...

  8. php实现二分查找法

    二分查找法需要数组是一个有序的数组 假设我们的数组是一个递增的数组,首先我们需要找到数组的中间位置. 一.要知道中间位置就需要知道起始位置和结束位置,然后取出中间位置的值来和我们的值做对比. 二.如果 ...

  9. 在Qt中使用SQLite数据库

    前言 SQLite(sql)是一款开源轻量级的数据库软件,不需要server,可以集成在其他软件中,非常适合嵌入式系统. Qt5以上版本可以直接使用SQLite(Qt自带驱动). 用法 1 准备 引入 ...

  10. [C++] Memory_stack_heap

    STACK_HEAP_MEMERY_MAP NOTICE: For p1 , where is the address of p1 ?(0x200400) IN STACK For p1 , wher ...