<!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实现点击切换显示隐藏，点击其它位置再隐藏
原文地址：http://www.cnblogs.com/jan-wen/p/7673794.html