<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <style>

        .pay-header {

            width: 500px;

            margin: 0 auto;

            clear: both;

        }

        .pay-header ul {

            border-bottom: 3px solid #5fb1e0;

            padding: 20px;

            overflow: hidden;

            position: relative;

            font-size: 14px;

            line-height: 22px;

            color: #3d474a;

            background: #eee;

        }

        .pay-header li {

            padding-right: 100px;

            overflow: hidden;

            zoom: 1;

            display: none;

        }

        .pay-header li.shopname {

            display: block;

        }

        .pay-header a.btn-det {

            position: absolute;

            right: 10px;

            padding-bottom: 12px;

            padding-left: 20px;

            color: #257bd4;

            text-decoration: none;

            font-size: 12px;

        }

        .pay-header ul .text i {

            width: 100%;

            display: inline-block;

            font-style: normal;

        }

        .pay-header ul .lab {

            width: 77px;

            float: left;

        }

        .pay-header ul .text {

            float: left;

        }

    </style>

    <title>RunJS 演示代码</title>

</head>

<body>

<div class="pay-header">

    <ul id="order-ul">

        <a href="javascript:;" class="btn-det" id="order-a">订单详情</a>

        <li><span class="lab">商品名称：</span><span class="text"><i>婴儿冬装连体衣服加厚</i><i>婴儿冬装连体衣服加厚宝宝

        </i><i>共2件</i></span></li>

        <li><span class="lab">交易金额：</span><span class="text">29.80元</span></li>

        <li><span class="lab">购买时间：</span><span class="text">2014年12月2日  15:21:14</span></li>

        <li><span class="lab">交易号　：</span><span class="text">2014120221001001970043444953</span></li>

        <li class="shopname" id="order-show"><span class="lab">交易商户：</span><span class="text">蓓莱乐</span></li>

        <li><span class="text">婴儿冬装连体衣服加厚</span></li>

    </ul>

</div>

<script>

    window.onload = function () {

        var oul = document.getElementById("order-ul");

        var oli = oul.getElementsByTagName("li");

        var oshow = document.getElementById("order-show");

        var oa = document.getElementById("order-a");

        oul.onclick = function (event) {

            (event || window.event).cancelBubble = true

        }

        oa.onclick = function (event) {

            for (i = 0; i < oli.length; i++) {

                oli[i].style.display = oli[i].style.display == "block" ? "none" : "block";

            }

            oshow.style.display = "block";

            //阻止事件冒泡

            (event || window.event).cancelBubble = true

        };

        document.onclick = function () {

            for (i = 0; i < oli.length; i++) {

                oli[i].style.display = "none";

            }

            oshow.style.display = "block";

        };

    }

</script>

</body>

</html>

js实现点击切换显示隐藏，点击其它位置再隐藏的更多相关文章

  1. vue点击切换样式，点击切换地址栏，点击显示或者隐藏

    1. vue点击显示切换 :class='{"span":index==0}' class原本是 类选择器 加上 :class就是绑定属性的意思 '{"span" ...

  2. 使用JS实现鼠标悬浮切换显示

    实现的是在鼠标悬停在不同链接上,在同一位置切换显示想要显示的内容 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional// ...

  3. jq 点击按钮显示div,点击页面其他任何地方隐藏div

    css .bl_rencai_32{ float: left; height: 35px; line-height: 35px; } .bl_rencai_32 >input{ width: 3 ...

  4. js 页面按钮提交后 创建显示loading div 操作完成后 再隐藏或删除 进度div

    预期效果: 1.点击Save按钮,创建及显示loading div框 2.Save操作完成后,再删除loading 及弹出提示结果 <html> <head> </hea ...

  5. vue 点击展开显示更多 点击收起部分隐藏

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

  6. 2-微信小程序开发(开发界面说明,按钮点击切换显示内容)

    说一个功能,大家在用微信实现控制设备的时候,是不是都在为绑定设备发愁. 我看了很多厂家的微信控制,大部分都只是可以用微信给设备配网,但是没有做用微信绑定的. 一般做绑定都是用设备的MAC地址. 这里我 ...

  7. jquery中点击切换的实现

    项目中经常会遇到一种情况,就是点击切换,比如点击按钮,div样式为1,再点击一下按钮,div样式为2,再点击一下按钮,div样式为1.需要自定义jQuery方法toggle. // toggle方法 ...

  8. vue点击切换颜色限制个数（用了mui框架）

    vue点击切换颜色 只能点击一个 <!doctype html> <head> <meta charset="UTF-8"> <title ...

  9. JS原生隐藏显示图片,点击切换图片的效果

    今天要说的内容,看标题就都能知道了!所有知识点一览无遗啊!咱们今天的东西,是纯纯的原生JS代码, 我先说一下要求, 1.有两个按钮,内容为显示,和换, 2.当点击显示的时候,按钮文字变成隐藏,同时图片 ...

随机推荐

  1. 动态计算rem的js代码

    以最小1024尺寸为例: function rem() { var htmlEle = document.documentElement; var winWidth = htmlEle.clientW ...

  2. 《你不知道的JavaScript上卷》知识点笔记

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px "PingFang SC" } p.p2 { margin: 0.0px ...

  3. 程序员是这样区分Null和Undefined

    Null类型 Null类型是第二个只有一个值的数据类型,这个特殊的值是null.从逻辑角度来看,null值表示一个空对象指针,而这也正是使用typeof操作符检测null值时会返回"obje ...

  4. 织梦dedecms如何去除版权中的Power by DedeCms

    很多站长在使用dedecms建站过程中,很多人都会调用到dedecms自带的powerby标签,这样在版权信息中就会多出Power by DedeCms这个连接.今天教大家如何去除. 工具/原料 de ...

  5. No input file specified的解决方法apache伪静态

    http://jingyan.baidu.com/article/dca1fa6f8d623ff1a44052e8.html (一)IIS Noinput file specified 方法一:改PH ...

  6. ecshop_标签大全

    admin 后台功能 -------templates后台模板 data 上传文件.SQL备份文件.配置项 ------sqldata 数据库备份文件 ------config.php配置文件 inc ...

  7. 常用SQL笔记总结

    DDL(data definition language)创建和管理表 1.创建表 1.直接创建 例如: create table emp( name varchar(20), salary int ...

  8. Java进阶篇（四）——Java异常处理

    程序中总是存在着各种问题,为了使在程序执行过程中能正常运行,使用Java提供的异常处理机制捕获可能发生的异常,对异常进行处理并使程序能正常运行.这就是Java的异常处理. 一.可捕获的异常 Java中 ...

  9. Linuxc - gdb调试程序

    指针实现变量交换值 #include <stdio.h> void change(int *a,int *b) { int tmp = *a; *a = *b;// 将指针a所在地址的值, ...

  10. ANSI C与C89、C99、C11区别差异

    body, table{font-family: 微软雅黑; font-size: 13.5pt} table{border-collapse: collapse; border: solid gra ...