点击自定义下拉框以外的区域关闭下拉框

Posted 2020-10-06 前端攻城弱鸡

1.写一个下拉框

html部分：

<div class="pull-left service-type mt-36">
    <div id="currentService">第一<img style="margin-left: 5px" src="arrow.png"/></div>
    <ul class="service-option hidden">
        <li value="1">第一</li>
        <li value="2">第二</li>
        <li value="3">第三</li>
        <li value="4">第四</li>
    </ul>
</div>

css部分：

.service-type{
  font-size: 16px;
  position: relative;
  height: 60px;
  width: 125px;
  margin-top: 19px;
  line-height: 60px;
  text-align: center;
  background-color: #e6eaf0;
  border-bottom: 2px solid #666666;
  li{
    width: 125px;
    height: 60px;
    padding:0;
  }
}
.service-option{
  margin: 0;
  background-color: #8fa0b8;
  color: #fff;
  position: absolute;
  height: auto;
  z-index: 9999;
  li{
    border-bottom:1px solid #e6eaf0;
  }
}

2.点击弹框出现下拉框

$(\'#currentService).click(function () {
    $(\'.service-option\').toggleClass(\'hidden\')
})

3.点击下拉框以外的区域关闭

 

document.onmouseup = function(e){
    var e = e || window.event;
    var target = e.target || e.srcElement;
    var _con = $(\'.service-type\')//获取你的目标元素
    //1. 点击事件的对象不是目标区域本身
    //2. 事件对象同时也不是目标区域的子元素
    if(!_con.is(e.target) && _con.has(e.target).length === 0){
        $(\'.service-option\').addClass(\'hidden\');
    }
}

 

4.效果（点击其他区域下拉框收起）

 

ps:解决浏览器自带的inline元素间距，css样式加上font-size:0或者inline元素之间加上注释<-- -->

----原创文章，©版权所有，转载请注明标明出处：http://www.cnblogs.com/doinbean