js实现点击切换显示隐藏，点击其它位置再隐藏

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js实现点击切换显示隐藏，点击其它位置再隐藏相关的知识，希望对你有一定的参考价值。

<!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实现点击切换显示隐藏，点击其它位置再隐藏的主要内容，如果未能解决你的问题，请参考以下文章

js怎么实现点击div区域外任意位置，使这个div隐藏？

js实现点击显示一个div,点击其他任何地方div消失,如何实现

vue2.0实现点击后显示，再次点击隐藏

怎么用js实现，点击“继续”，隐藏当前div，显示下一个div，点击“返回”隐藏当前div，显示上一个div

jQuery实现多个li点击切换和显示隐藏

JS点击显示，再次点击隐藏的效果，菜鸟求大神