jQuery实现右侧功能栏、点击其它地方，右侧功能栏隐藏
2017-08-14 14:36
525 查看
[align=center]源码下载[/align]
<html>
<head>
<title>我的订货单</title>
<style type="text/css">
/*全站初始化样式*/
body{font:14px/24px microsoft yahei,"微软雅黑",sans-serif;color:#333;background-color:#fff;}
html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{padding:0;margin:0;}
label {cursor:pointer;}
ol,ul,li{list-style:none;}
em,b,i,u{font-style:normal;font-weight:normal;text-decoration:none;}
table{border-collapse:collapse;}
fieldset,img,input,button{ border:none}
input,select,textarea{ font-family:microsoft yahei; border:1px solid #ccc;}
a{text-decoration:none;color:#666;outline:none;}
a:hover{text-decoration:none;}
.clearfix:after{content:"\0020"; height:0; display:block; clear:both; overflow:hidden}
.over{ overflow:hidden;}
.warp_cent{ margin:0 auto;}
input[type=text]{outline:none;}
/*浮动*/
.fl {float:left;}
.fr {float:right;}
.posir{ position:relative;}
.cboth{ clear:both;}
.disnone{ display:none;}
/*我的订货单*/
.purchase_order{height:100%; background:#f2f4f8; position:fixed; top:0px; right:0px; z-index:299; } /*width:338px; */
.purchase_l{ width:38px;height:100%; background:#40ac72; position:relative;}
.icon_w{ width:28px; margin-top:350px; padding:0 5px ;border-bottom:1px dashed #dfdfdf; overflow:hidden;}
.icon_w a{ display:block; color:#fff; font-size:24px; text-align:center; line-height:38px; }
.icon_w:hover{ background:#fff;}
.icon_w:hover a{ color:#40ac72;}
.order_w{ width:28px; padding:10px 5px; overflow:hidden;border-bottom:1px dashed #dfdfdf; }
.order_w a{ display:block; font-size:14px; color:#fff; line-height:18px; text-align:center;}
.order_w a span{ display:block; height:38px; text-align:center; color:#fff; font-size:20px; line-height:38px; }
.order_w a p{ width:18px; height:18px; background:#fff; border-radius:9px; text-align:center; line-height:18px; font-size:12px; color:#fff; margin:10px auto; color:#fa3602;}
.order_w:hover{ background:#fff;}
.order_w:hover a span{ color:#40ac72;}
.order_w:hover a { color:#40ac72;}
.order_w:hover a p{ background:#fa3602; color:#fff;}
/*打开我的订货单，控制区域样式*/
.order_h{ background:#fff;}
.order_h a{ color:#40ac72;}
.order_h a span{ color:#40ac72;}
.order_h a p{ background:#fa3602; color:#fff;}
.top_icon{ position:absolute; left:0px; bottom:50px; width:38px; height:38px; line-height:30px;}
.top_icon a{ display:block; color:#fff; font-size:24px; padding:10px 0; text-align:center;}
.top_icon a:hover{ background:#fff; color:#40ac72;}
.purchase_r{ float:right; width:300px; height:100%; overflow:scroll-y; position:relative; }
.tj{ height:36px; line-height:36px; background:#f2f4f8; padding:0 10px;}
.cp_list{ overflow:hidden;}
.cp_list li{ background:#fff; padding:10px; border-bottom:1px solid #eaeaea; padding-right:34px; position:relative; margin-bottom:5px;}
.cp_list li dt{ float:left; width:15px; margin-right:10px; height:66px; line-height:66px; }
.cp_list li dd{height:66px; overflow:hidden;}
.cp_img { float:left; width:80px; height:66px; overflow:hidden; margin-right:8px;}
.cp_img img{ width:100%; height:100%;}
.cp_mane{ height:66px; overflow:hidden;}
.cp_mane p{ font-size:14px; color:#666; line-height:20px; max_height:40px;}
.cp_mane span{ font-size:12px; font-weight:bold; color:#fa3602;}
.cp_dle{ position:absolute; right:10px; top:10px; width:24px; height:24px; z-index:299;}
.cp_dle a{ display:block; width:24px; height:24px; background:url(bimg2_03.png) no-repeat top right; }
.cp_dle a:hover{ background:url(bimg_03.png) no-repeat top right;}
.settlement{ position:absolute; left:0px; bottom:0px; width:280px; height:70px; padding:10px; overflow:hidden; background:#fff; }
.settlement dt{ height:30px; line-height:30px; margin-bottom:10px;}
.settlement dt p{ float:left; font-size:14px; color:#444;}
.settlement dt span{ float:right; color:#fa3602;}
.settlement dd{ height:32px; line-height:32px; background:#fb2929; color:#fff; font-size:16px; text-align:center;}
.settlement dd a{ display:block; color:#fff;}
</style>
<script src="jquery-1.8.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$(".purchase_order .order_w").on('mousedown', function(event) {
event.stopPropagation(); //阻止mousedown 事件冒泡（注意只阻止了mousedown事件）
event.preventDefault(); //阻止当前元素默认事件
//以上两个方法同样适用于原生js
if ($(".purchase_order .purchase_r").hasClass("disnone")) {
$(".purchase_order .purchase_r").removeClass("disnone");
$(".purchase_order .order_w").addClass("order_h");
} else {
$(".purchase_order .purchase_r").addClass("disnone");
$(".purchase_order .order_w").removeClass("order_h");
}
});
$(".purchase_order").on('mousedown', function(event) {
event.stopPropagation(); //阻止mousedown 事件冒泡（注意只阻止了mousedown事件）
event.preventDefault(); //阻止当前元素默认事件
});
$(document).on("mousedown", function() {
$(".purchase_order .purchase_r").addClass("disnone");
$(".purchase_order .order_w").removeClass("order_h");
});
});
</script>
</head>
<body>
<!--我的订货单-->
<div class="purchase_order">
<div class="purchase_l fl">
<div class="icon_w">
<a href="#" class="iconfont"></a></div>
<div class="order_w">
<a href="#"><span class="iconfont"></span> 我<br />
的<br />
订<br />
货<br />
单<p>
1</p>
</a>
</div>
<div class="top_icon">
<a href="javascript:scrollTo(0,0);" class="iconfont"></a></div>
</div>
<div class="purchase_r disnone">
<div class="tj">
<p class="fl">
<span>
<input name="" type="checkbox" value="" /></span>全选</p>
<p class="fr">
<a href="#" class="iconfont font18"></a></p>
</div>
<ul class="cp_list">
<li>
<div class="cp_dle">
<a href="#"></a>
</div>
<dt>
<input name="" type="checkbox" value="" /></dt>
<dd>
<div class="cp_img">
<img src="cpimg_03.png" /></div>
<div class="cp_mane">
<p>
2.5T蓄电池式电机车</p>
<span>￥1125</span>
</div>
</dd>
</li>
<li>
<div class="cp_dle">
<a href="#"></a>
</div>
<dt>
<input name="" type="checkbox" value="" /></dt>
<dd>
<div class="cp_img">
<img src="cpimg_03.png" /></div>
<div class="cp_mane">
<p>
2.5T蓄电池式电机车</p>
<span>￥1125</span>
</div>
</dd>
</li>
<li>
<div class="cp_dle">
<a href="#"></a>
</div>
<dt>
<input name="" type="checkbox" value="" /></dt>
<dd>
<div class="cp_img">
<img src="cpimg_03.png" /></div>
<div class="cp_mane">
<p>
2.5T蓄电池式电机车</p>
<span>￥1125</span>
</div>
</dd>
</li>
<li>
<div class="cp_dle">
<a href="#"></a>
</div>
<dt>
<input name="" type="checkbox" value="" /></dt>
<dd>
<div class="cp_img">
<img src="cpimg_03.png" /></div>
<div class="cp_mane">
<p>
2.5T蓄电池式电机车</p>
<span>￥1125</span>
</div>
</dd>
</li>
<li>
<div class="cp_dle">
<a href="#"></a>
</div>
<dt>
<input name="" type="checkbox" value="" /></dt>
<dd>
<div class="cp_img">
<img src="cpimg_03.png" /></div>
<div class="cp_mane">
<p>
2.5T蓄电池式电机车</p>
<span>￥1125</span>
</div>
</dd>
</li>
</ul>
<div class="settlement">
<dt>
<p class="fl">
共12件商品</p>
<span class="fr">￥1152</span></dt>
<dd>
<a href="#">提交</a></dd>
</div>
</div>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jQuery实现点击除了特定div的页面其它地方，隐藏该div功能。
- jquery 点击页面其他地方实现隐藏菜单功能
- jquery 点击页面其他地方实现隐藏菜单功能
- jQuery实现点击其它地方隐藏该div
- 由点击页面其它地方隐藏div所想到的jQuery的delegate
- jQuery实现鼠标点击div外的地方div隐藏
- 点击页面其它地方隐藏div所想到的jQuery的delegate
- JQuery 鼠标点击其它地方隐藏层
- jquery实现点击radio，当选中‘其它’时，显示后面输入框；否则隐藏
- 由点击页面其它地方隐藏div所想到的jQuery的delegate
- 点击页面其它地方隐藏div所想到的jQuery的delegate
- jQuery 实现点击页面其他地方隐藏菜单
- 基于jquery鼠标点击其它地方隐藏层的实例代码
- jQuery实现点击其他地方div隐藏
- 由点击页面其它地方隐藏div所想到的jQuery的delegate
- 点击页面其它地方隐藏div所想到的jQuery的delegate
- jquery实现点击radio，当选中‘其它’时，显示后面输入框；否则隐藏
- 由点击页面其它地方隐藏div所想到的jQuery的delegate
- jQuery 怎么实现点击页面其他地方隐藏菜单？ 做了个按钮点击时弹出菜单，想实现点击其他地方时隐藏弹出的菜单
- 由点击页面其它地方隐藏div所想到的jQuery的delegate