点击文档或窗口时，打开的div应关闭

Question

我正在尝试使用jquery创建我的自定义选择下拉列表，除了之外一切顺利 点击.select-list上的活动，它会关闭，但目前还没有发生，下面是我的代码

$("#selectedValue").click(function() {
    $(".select-list").toggleClass("showlist");
});
$(".select-list li").click(function() {
    $('#selectedValue').html($(this).text());
    alert($('#selectedValue').text());
    $('.select-list').removeClass("showlist");
})

var selectListClass = $('.select-list').hasClass("showlist");
if (selectListClass) {

    $(document).click(function() {
        $('.select-list').removeClass("showlist");
    });
}

https://jsfiddle.net/c7k7nLdu/2/

Answer 1

在文档点击事件（仅删除它）之前，您不需要if，但在点击事件上不需要stopPropagation。例如：

$("#selectedValue").click(function(e){
    e.stopPropagation();
    ...

在此，我更新了您的jsFiddle

Answer 2

您可以在e.target内使用$(document).click(e)来获取所点击元素的目标。

然后使用e.target !== $('#selectedValue')[0]检查您是否点击了“下拉列表”

$(document).click(function(e) {
  if (e.target !== $('#selectedValue')[0]) {
    var selectListClass = $('.select-list').hasClass("showlist");
    if (selectListClass) {
      $('.select-list').removeClass("showlist");
    }
  }
});

示例

$("#selectedValue").click(function() {
  $(".select-list").toggleClass("showlist");
});
$(".select-list li").click(function() {
  $('#selectedValue').html($(this).text());
  alert($('#selectedValue').text());
  $('.select-list').removeClass("showlist");
})

$(document).click(function(e) {
  if (e.target !== $('#selectedValue')[0]) {
    var selectListClass = $('.select-list').hasClass("showlist");
    if (selectListClass) {
      $('.select-list').removeClass("showlist");
    }
  }
});

#selectDropdown {
  padding-right: 10px;
  width: 200px;
}

#selectedValue {
  white-space: nowrap;
  padding-right: 20px;
  padding-left: 0;
  background: url("../images/dropdown-arrow.png") no-repeat right;
  line-height: 36px;
  height: 36px;
  clear: both;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  /*     font-size: 13px; */
}

#selectDropdown ul {
  display: none;
  border: 1px solid #f2f2f2;
  list-style: none;
  margin: 0;
  padding: 0;
}

#selectDropdown ul.showlist {
  display: block;
  transition-property: all;
  transition-duration: .5s;
  transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}

#selectDropdown ul li {
  line-height: 24px;
  cursor: pointer;
}

#selectDropdown ul li:hover {
  color: #ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="selectDropdown" class="col-md-4 no-pad">
  <div id="selectedValue" class="col-md-12">Want to add a greeting?</div>
  <ul class="select-list">
    <li>Data sample 1</li>
    <li>Data sample 2</li>
    <li>Data sample 3</li>
    <li>Data sample 4</li>
    <li>Data sample 5</li>
    <li>Data sample 6</li>
  </ul>
</div>

Fiddle Demo

Answer 3

请尝试这种方式

＆＃13;

＆＃13;

$(function() {
    $(document).on('click', function(e) {
        if (e.target.id != 'selectedValue') {
             $('.select-list').removeClass("showlist");
        }
    })
});


$("#selectedValue").click(function(){

  $(".select-list").toggleClass("showlist");
  });
  
  $(".select-list li").click(function(){
    $('#selectedValue').html($(this).text());
    alert($('#selectedValue').text());
    $('.select-list').removeClass("showlist");
})

＆＃13;

#selectDropdown {
    padding-right: 10px;
    width:200px;
}

#selectedValue {
    white-space: nowrap;
    padding-right: 20px;
    padding-left: 0;
    background: url("../images/dropdown-arrow.png") no-repeat right;
    line-height: 36px;
    height: 36px;
    clear: both;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

#selectDropdown ul { 
  display:none; 
  border:1px solid #f2f2f2;  
  list-style:none; margin:0; padding:0; 
}

#selectDropdown ul.showlist {display:block;
	transition-property: all;
	transition-duration: .5s;
	transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}

#selectDropdown ul li { 
  line-height:24px; cursor:pointer; 
}

#selectDropdown ul li:hover { 
  color:#ccc;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>

<div id="selectDropdown" class="col-md-4 no-pad">
<div id="selectedValue" class="col-md-12">
  Want to add a greeting?
</div>

  <ul class="select-list">
    <li>Data sample 1</li>
    <li>Data sample 2</li>
    <li>Data sample 3</li>
    <li>Data sample 4</li>
    <li>Data sample 5</li>
    <li>Data sample 6</li>
  </ul>
  
</div>

＆＃13;

＆＃13;

＆＃13;