您需要添加一个“全局”点击处理程序来隐藏下拉列表：

$(document).on("click", () => $(".b").slideUp(100));

字符串
在dropdownshow代码中将其与return false结合使用，以便显示下拉列表不会立即隐藏它：

$(".btn-select").click(function(){
  $(".b").slideDown(100);
  return false;
});

型
更新代码：

//test for getting url value from attr
// var img1 = $('.test').attr("data-thumbnail");
// console.log(img1);

//test for iterating over child elements
var langArray = [];
$('.vodiapicker option').each(function() {
  var img = $(this).attr("data-thumbnail");
  var text = this.innerText;
  var value = $(this).val();
  var item = '<li><img src="' + img + '" alt="" value="' + value + '"/><span>' + text + '</span></li>';
  langArray.push(item);
})

$('#a').html(langArray);

//Set the button value to the first el of the array
$('.btn-select').html(langArray[0]);
$('.btn-select').attr('value', 'en');

//change button stuff on click
$('#a li').click(function() {
  var img = $(this).find('img').attr("src");
  var value = $(this).find('img').attr('value');
  var text = this.innerText;
  var item = '<li><img src="' + img + '" alt="" /><span>' + text + '</span></li>';
  $('.btn-select').html(item);
  $('.btn-select').attr('value', value);
  $(".b").slideUp(100);
  //console.log(value);
});

$(".btn-select").click(function() {
  $(".b").slideDown(100);
  return false;
});

$(document).on("click", () => $(".b").slideUp(100));

x

.vodiapicker {
  display: none;
}

#a {
  padding-left: 0px;
}

#a img,
.btn-select img {
  width: 12px;
}

#a li {
  list-style: none;
  padding-top: 5px;
  padding-bottom: 5px;
}

#a li:hover {
  background-color: #F4F3F3;
}

#a li img {
  margin: 5px;
}

#a li span,
.btn-select li span {
  margin-left: 30px;
}

/* item list */

.b {
  display: none;
  width: 100%;
  max-width: 350px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
  border: 1px solid rgba(0, 0, 0, .15);
  border-radius: 5px;
}

.open {
  display: show !important;
}

.btn-select {
  margin-top: 10px;
  width: 100%;
  max-width: 350px;
  height: 34px;
  border-radius: 5px;
  background-color: #fff;
  border: 1px solid #ccc;
}

.btn-select li {
  list-style: none;
  float: left;
  padding-bottom: 0px;
}

.btn-select:hover li {
  margin-left: 0px;
}

.btn-select:hover {
  background-color: #F4F3F3;
  border: 1px solid transparent;
  box-shadow: inset 0 0px 0px 1px #ccc;
}

.btn-select:focus {
  outline: none;
}

.lang-select {
  margin-left: 50px;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select class="vodiapicker">
  <option value="en" class="test" data-thumbnail="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3e/LetterA.svg/2000px-LetterA.svg.png">English</option>
  <option value="au" data-thumbnail="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fb/NYCS-bull-trans-B.svg/480px-NYCS-bull-trans-B.svg.png">Engllish (AU)</option>
  <option value="uk" data-thumbnail="https://glot.io/static/img/c.svg?etag=ZaoLBh_p">Chinese (Simplified)</option>
  <option value="cn" data-thumbnail="https://upload.wikimedia.org/wikipedia/commons/thumb/3/39/NYCS-bull-trans-D.svg/2000px-NYCS-bull-trans-D.svg.png">German</option>
  <option value="de" data-thumbnail="https://upload.wikimedia.org/wikipedia/commons/thumb/0/04/MO-supp-E.svg/600px-MO-supp-E.svg.png">Danish</option>
  <option value="dk" data-thumbnail="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c2/F_icon.svg/267px-F_icon.svg.png">French</option>
  <option value="fr" data-thumbnail="https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_Logo.svg/2000px-Google_%22G%22_Logo.svg.png">Greek</option>
  <option value="gr" data-thumbnail="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5e/4H_Emblem.svg/1000px-4H_Emblem.svg.png">Italian</option>
</select>

<div class="lang-select">
  <button class="btn-select" value=""></button>
  <div class="b">
    <ul id="a"></ul>
  </div>
</div>

的一种或多种

你可以通过几种方式来实现这一点，这里有一个例子。
因为你正在创建一个div作为“select dropdown”，你需要检查点击是否不是btn-select也不是b

// Check on click anywhere on document 
// if the target is not the dropdown or the button select

$(document).on('click', function(event) {
    if (!$(event.target).closest('.btn-select, .b').length) {
      $('.b').hide();
    }
  });

字符串

$('*').on('click', function(e){
    if(e.target.className != 'btn-select')
        $('.b').css('display', 'none');     
});

字符串
此代码可能无法在Codepen上工作。当您将代码从Codepen复制到html时，代码将正常工作。