<!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. hset和hget

  2. Spark算子--take、top、takeOrdered

    转载请标明出处http://www.cnblogs.com/haozhengfei/p/552e8a32eee9d50fe394dfdcb14c78f3.html take.top.takeOrder ...

  3. Spark算子--mapPartitions和mapPartitionsWithIndex

    mapPartitions--Transformation类算子 代码示例 result   mapPartitionsWithIndex--Transformation类算子 代码示例 result ...

  4. SDP（3）：ScalikeJDBC- JDBC-Engine：Fetching

    ScalikeJDBC在覆盖JDBC基本功能上是比较完整的,而且实现这些功能的方式比较简洁,运算效率方面自然会稍高一筹了.理论上用ScalikeJDBC作为一种JDBC-Engine还是比较理想的:让 ...

  5. angular4 中自定义pagination组件

    你用Angular 吗? 一.介绍 一个基于angular4 开发的可以分页的组件.组件的好处就是可以复用,复用.....作为一个前端码农,开始的分页功能实现是我用jquery写的,其他同事用的时候都 ...

  6. Java数据持久层框架 MyBatis之背景知识一

    对于MyBatis的学习而言,最好去MyBatis的官方文档:http://www.mybatis.org/mybatis-3/zh/index.html 对于语言的学习而言,马上上手去编程,多多练习 ...

  7. Hyperledger Fabric Membership Service Providers (MSP)——成员服务

    Membership Service Providers (MSP) 本文将介绍有关MSPs的设置和最佳实践的详细方案. Membership Service Providers (MSP)是一个旨在 ...

  8. linux 巨页使用测试以及勘误1

    linux使用hugetlbfs的方式来支持巨页,也成为大页. 网上看到有人说巨页不支持read,和write调用,只支持mmap,但是看3.10内核代码的时候发现: const struct fil ...

  9. 【转】查询SQLSERVER执行过的SQL记录

    --创建时间 QS.creation_time, --查询语句 ), (( THEN DATALENGTH(st.text) ) ) AS statement_text, --执行文本 ST.text ...

  10. java面向对象的三大特性——多态

    多态 所谓多态就是指程序中定义的引用变量所指向的具体类型和通过该引用变量发出的方法调用在编程时并不确定,而是在程序运行期间才确定,即一个引用变量倒底会指向哪个类的实例对象,该引用变量发出的方法调用到底 ...