`

点击空白处下拉列表隐藏，全选，反选，不选

 
阅读更多 
<!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>



说明：点击空白处下拉框消失

      本文中的例子是点击id为cho的span，即<span id="cho">选择</span>时下拉框消失。但是还有另外一种情况，就是所要点击的id里包含了两个以上容器，如：<div id="shool" ><span>选择您所在的学校</span><b></b></div>
      当点击id为shool的容器时，用以上代码并不能实现想要的效果，即：下拉框不能显示出来，所以要将以上代码稍作调整 

document.onclick=function(e){ 
    var e=e?e:window.event; 
    var tar = e.srcElement||e.target; 
    if(tar.id!="shool" && $(tar).parent().attr("id")!="shool"){ 
      if($(tar).attr("class")=="div_d"){ 
        $(".mail_tit ul.div_d").css("display","block") 
      }else{ 
        $(".mail_tit ul.div_d").css("display","none"); 
      } 
    } 
  }
分享到：
| 美化单个checkbox
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics