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

liuyt611

浏览: 26482 次
性别:
来自: 北京

最近访客更多访客>>

ppyyll7788

LTao5461218

自由翱翔的鱼

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

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

博客分类：

工作中遇到的问题

<!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

2013-08-13 09:44
浏览 732
评论(0)
分类:Web前端
查看更多

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

评论

发表评论

相关推荐

获取当前鼠标点击的位置

判断checkbox是否选中

ie67中li下的间隙问题

含滚动条的内容区域，文字居中问题 版心问题

IE6下溢出多余文字--多了一只猪

遇到的问题

美化单个checkbox

美化type="file"

ie6兼容png前置与背景

美化select

下载--美化select 2

下载--美化select

视频播放 ---滚动条的设置

CSS 子div设置float之后父div无法自适应高度问题 --清除浮动

同一行图片和文字垂直居中以及图片和文字间隙问题

透明度相关问题

ie6兼容-------Xun

最近访客更多访客>>

含滚动条的内容区域，文字居中问题版心问题