點擊下拉框以外的區域關閉下拉框

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