<!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" /> <title>无标题文档</title> <script type="text/javascript" src="jquery-1.9.1.min.js"></script> </head> <body> <div class="content"> <div class="mail_tit"> <span id="cho">选择</span> <ul class="div_d"> <li class="check_all">全选</li> <li class="uncheck">不选</li> <li class="other_check">反选</li> </ul> <a href="">删除</a> <a href="" class="write">写信</a> </div> <div class="mail_con"> <ul> <li> <input type="checkbox" /> <a href="" class="email_name f_l">geageah</a> <a href="" class="title f_l">geageah</a> <a href="" class="time">3月29日</a> </li> <li> <input type="checkbox" /> <a href="" class="email_name f_l">geageah</a> <a href="" class="title f_l">2013新校规修订</a> <a href="" class="time">3月29日</a> </li> <li> <input type="checkbox" /> <a href="" class="email_name f_l">geageah</a> <a href="" class="title f_l">校园邮件</a> <a href="" class="time">3月29日</a> </li> </ul> </div> </div> </body> </html> <style> *{padding:0px; margin:0px;} .f_l{float:left;} ul li{list-style:none;} .mail_tit a{ display:block; width:52px; height:28px; background:url(../images/mail_line.jpg) repeat-x; border:1px solid #999; border-radius:3px; color:#555; line-height:28px; text-align:center; float:left; margin-left:14px; *display:inline; } .mail_tit a:hover{ text-decoration:none; } .mail_tit a.write{ color:#fff; background:#1882cf; border:1px solid #0366af; } .mail_tit span{ display:block; width:52px; height:28px; background:url(../images/mail_line.jpg) repeat-x; border:1px solid #999; border-radius:3px; color:#555; line-height:28px; text-align:center; float:left; cursor:pointer; } .mail_tit ul{ display:none; border:1px solid #999; position:absolute; top:30px; left:0px; border-radius:3px; background:#fff; } .mail_tit ul li{ line-height:32px; color:#555; cursor:pointer; width:42px; padding-left:10px; } .mail_tit ul li:hover{ background:#BFBFBF; color:#fff; } .mail_tit{ position:relative; height:30px; padding-bottom:38px; border-bottom:1px solid #a3bdd0; } .mail_con ul li input{ width:14px; height:14px; float:left; margin-top:13px; } .mail_con ul li{ height:40px; line-height:40px; padding-left:10px; border-bottom:1px solid #d5d6d7; } .mail_con ul li:hover{ background:#EFEFEF; } .mail_con ul li a{ color:#222; font-size:14px; height:40px; overflow:hidden; display:block; } .mail_con ul li a:hover{ text-decoration:none; } .mail_con ul li a.email_name{ width:190px; margin-left:40px; *display:inline; } .mail_con ul li a.title{ width:630px; margin-right:10px; *display:inline; } .mail_con ul li a.time{ width:66px; _width:60px; } </style> <script> $("#cho").click(function(even){ $(".mail_tit ul.div_d").css("display","block"); }); //点击空白处,下拉框消失 document.onclick=function(e){ var e=e?e:window.event; var tar = e.srcElement||e.target; if(tar.id!="cho"){ if($(tar).attr("class")=="div_d"){ $(".mail_tit ul.div_d").css("display","block") }else{ $(".mail_tit ul.div_d").css("display","none"); } } } $(function(){ //全选 $(".check_all").click(function(){ $(".mail_con ul li input").each(function(){ $(this).attr("checked",true); }); }); //不选 $(".uncheck").click(function(){ $(".mail_con ul li input").each(function(){ $(this).attr("checked",false); }); }); //反选 $(".other_check").click(function(){ $(".mail_con ul li input").each(function(){ if($(this).is(":checked")){ $(this).attr("checked",false); }else{ $(this).attr("checked",true); } }); }); }); </script>
详细解决方案
点击空白点下拉列表隐藏,全选,反选,不选
热度:190 发布时间:2013-08-13 16:43:28.0
相关解决方案