JavaScript——除指定区域外点击任何地方隐藏DIV

实现效果：

首先点击下拉箭头

出现选择的列表

然后点击列表的某一项，列表隐藏，或者点击这个区域外的地方隐藏列表

主要代码如下

html:

<div class="input-box"><!-- 缴费类型 --><div class="pay-type"><div class="select-type"><div class="select-wrapper"><span class="type-name">个人编号</span><div class="arrow-icon" onclick="toggleTypeList()"></div></div><ui class="type-list"><li data-code="360100">个人编号</li><li data-code="360200">社保卡号</li><li data-code="360300">医保卡银行账号</li></ul></div></div></div>

JS

var typeList = document.querySelector('.type-list')var typeName = document.querySelector('.type-name')//展开缴费类型列表function toggleTypeList() {$('.type-list').toggle();$('.insurance-list').css('display', 'none')}//选择城市typeList.onclick = function (e) {var target = e.target ? e.target : e.srcElement;if (target.tagName = 'LI') {console.log(target.dataset.code)typeList.style.display = 'none';typeName.innerHTML = target.innerHTML}}$(document).click(function (e) {var $target = $(e.target);//点击表情选择按钮和表情选择框以外的地方 隐藏表情选择框if (!$target.is('.select-type *') && !$target.is('.type-list')) {$('.type-list').hide();}});