<!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. ceph -s集群报错too many PGs per OSD

    背景 集群状态报错,如下: # ceph -s cluster 1d64ac80-21be-430e-98a8-b4d8aeb18560 health HEALTH_WARN <-- 报错的地方 ...

  2. Ajax及异步操作

    之前我们使用的是jQuery的Ajax,这是一种极为便捷的Ajax操作方式,但是我们还需要对Ajax技术进行进一步的了解. <input type="text" id=&qu ...

  3. 从零开始学习前端开发 — 2、CSS基础

    一.CSS简介  1.CSS是什么 CSS是Cascading Style Sheets的简称,中文称为层叠样式表.特点:实现了表现与结构相分离 2.css基础语法 css是由选择符和声明两大部分组成 ...

  4. different between<A Href> and <jsp: forward>

    i want to access Servelt by hyperlink in a jsp web site connection.jsp <%@ page contentType=" ...

  5. webpack 基本打包方法

    webpack的打包基本配置文件webpack.config.js 可以在webpack.config.js里面写好配置:比如前章节所总结的四大核心 |-- add.js // 定义一个普通加法函数 ...

  6. Android studio登录界面

    打开Android studio,你需要建立两个类LoginMainAcitivity.java和SuccessMainActivity.java,和与之相对应的xml布局文件login_main.x ...

  7. linux_软件安装策略和升级策略

    运维3大原则:可靠.稳定.简单 尝试新的软件,一切都是未知的,也就是说不可靠,不可预测也就意味的不稳定,解决问题,通过百度和谷歌工具有可能找不到解决方法,只能通过官方文档来解决问题,大大增加了排错时间 ...

  8. php中urldecode()和urlencode()起什么作用

    urlencode()函数原理就是首先把中文字符转换为十六进制,然后在每个字符前面加一个标识符%.urldecode()函数与urlencode()函数原理相反,用于解码已编码的 URL 字符串,其原 ...

  9. Linux下安装mysql（yum和源码编译两种方式）

    这里介绍Linux下两种安装mysql的方式:yum安装和源码编译安装. 1. yum安装 (1)首先查看centos自带的mysql是否被安装: # yum list installed |grep ...

  10. MySql按日期进行统计

    1 数据库字段pk_time(Varchar) 当天的数据 SELECT * FROM 表 WHERE date(fk_time) = curdate(); 当月的数据 SELECT *FROM 表 ...