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