<!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. 初识RabbitMQ,附RabbitMQ+PHP演示实例

    RabbitMQ是一个在AMQP基础上实现的企业级消息系统.何谓消息系统,就是消息队列系统,消息队列是""消费-生产者模型""的一个典型的代表,一端往消息队列中 ...

  2. 访问远程MySQL数据库的方法

    请问各位部署LAMP的时候MySQL是独立出来的服务器,在apache上编译安装php的时候有个--with-mysql后面应该是带mysql路径的,可我应该怎样把这个连接到mysql服务器,因为不是 ...

  3. Uva10129 - Play on Words 欧拉通路 DFS

    题目链接: http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&category=105& ...

  4. ngRx 官方示例分析 - 2. Action 管理

    我们从 Action 名称开始. 解决 Action 名称冲突问题 在 ngRx 中,不同的 Action 需要一个 Action Type 进行区分,一般来说,这个 Action Type 是一个字 ...

  5. Sencha Touch vs jQuery Mobile

    Sencha Touch:重量级框架,类似于Flex SDK;组件封装较多;在各平台交互表现统一(内部封装);入门门槛较高 jQuery Mobile:轻量级框架,实质是jQuery插件;组件较少;交 ...

  6. 如何更改MyEclipse中XML文件的字体？

    windows>Preferences>General>Appearance>Colors and Fonts>Basic>Text Font

  7. php foreach用法和实例

    原文地址:http://www.cnblogs.com/DaBing0806/p/4717718.html foreach()有两种用法:1: foreach(array_name as $value ...

  8. MySQL服务器最大连接数怎么设置才合理[转]

    如果mysql 连接数据设置不合理可能会导致很小的流量mysql就提示MySQL: ERROR 1040: Too many connections错误了,那么要如何才算是合理设置mysql最大连接数 ...

  9. linkin大话设计模式--观察者模式

    linkin大话设计模式--观察者模式 观察者模式定义了对象间的一对多依赖关系,让一个或者多个观察者观察一个对象主题.当主题对象的状态发生改变的时候,系统能通知所有的依赖于此对象的观察者对象,从而能自 ...

  10. JDOJ-P1260 VIJOS-P1083 小白逛公园

    首先,在这里给大家推荐一个网站,https://neooj.com:8082,这是我母校的网站 言归正传,题目描述 VIJOS-P1083 小白逛公园 Time Limit: 1 Sec  Memor ...