On click of document or window a open div should close

Question

I am trying to create my custom select drop down using jquery, all goes well except the click event on .select-list , it should close but currently it's not happening, below one is my code

$("#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

You don't need if before document click event (just remove it), but stopPropagation on the click events. Example:

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

Here, I updated your jsFiddle

Answer 2

You can use e.target inside your $(document).click(e) to get the target of the clicked element.

Then use e.target !== $('#selectedValue')[0] to check if you have clicked on the "dropdown"

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

Example

 $("#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

Please try this way

 $(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"); }) 

 #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; } 

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