<!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. Docker版本升级至17.03

    2017/3/3,Docker官方发表了一篇博客,Docker版本从1.13.*直接跳入17.03,该版本的意思是17年3月.同时,还声明了Docker以后会以CE(Community Edition ...

  2. AMD规范学习笔记

    背景 NodeJS的一套比较简洁 Moudles 规范, 使得在服务器端的模块化变得更加简单.很长一段时间,很多公司或者项目都有自己的一套模块化机制, 却未能形成一套统一的标准, NodeJS的Mou ...

  3. nginx重启几种方法

    http://blog.csdn.net/zqinghai/article/details/71125045 ps -ef|grep nginx 平滑重启命令: kill -HUP 住进称号或进程号文 ...

  4. Vuejs 安装与配置

    1.全局安装 vue-cli $ npm install --global vue-cli 2.创建一个基于 webpack 模板的新项目 $ vue init webpack my-project ...

  5. arduino与DS1302时钟调试失败的分析

    前两天测试了时钟模块,但是,一直失败,能读取时间,但是设置不了时间,所以.这次我查了很多资料,发现好像是信号线的问题,线太长,数据收到干扰, 资料如下http://www.51hei.com/bbs/ ...

  6. httpd: Could not reliably determine the server's fully qualified domain name, using ::1 for ServerName

    问题原因: httpd服务配置文件,并没有设置解析根地址,无法可靠地确定服务器的完全合格的域名 如何解决? httpd的配置文件放在 /etc/httpd/conf/目录下,去掉ServerName注 ...

  7. HTML中padding和margin的区别和用法

     margin(外边距) 定义:margin是用来隔开元素与元素的间距,发生在元素本身的外部,margin用于布局分开元素使元素与元素互不相干. 提示:margin: top right bottom ...

  8. Hibernate （三）

    1 一对多的单向 示例:一个已经存在的学生,新建一个班级,然后将该学生加入到该班级之下 设置inverse="false" <?xml version="1.0&q ...

  9. 《CSS动画实用技巧》课程笔记

    概述 这是我学习[CSS动画实用技巧][1]的课程笔记 常用动画属性--transition [常用动画属性--transition][2] .change img{ display:block; w ...

  10. 重拾Python(1):使用Anaconda搭建Python开发环境（Windows7）

    1.为什么选择Anaconda? Anaconda解决了Python使用痛点. Python好用但是令人头疼的就是库管理与Python不同版本的问题,特别是Windows环境下. 2.什么是Anaco ...