jquery - 当用户点击离开链接时如何切换类？

Question

我创建了一个工作切换，当单击锚标记链接时，它将向子列表添加一个“in”类。但是，如果用户单击包装器或页面上的其他位置，我试图让它删除此类（这将隐藏子导航）。我的代码是：

 $('#filterExtendListToggle').on('click', function() {
	  $('.filter-extended-list').toggleClass('in');
 });
 $('.filter-extended-list').blur(function(){
	  $(this).removeClass('in');
 });

ul {
    list-style:none;
	padding:0;
	margin:0;
}   

.wrapper {
	width:100%;
	height:100vh;
	border:3px solid red;
}

.filter-inner {
	display:flex;
	align-items:center;
}


    .flt-mod-01 {
        overflow: visible;
        width:100%;
        position:relative;
		 display:flex;
    }
    .flt-mod-01 .filters-list li {
        margin-right:10px;
        margin-bottom:10px;
		  float:left;
    }
    .flt-mod-01 .filters-list > li a,
    .flt-mod-01 .filters-list > li a:active,
    .flt-mod-01 .filters-list > li a:visited,
    .flt-mod-01 .filters-list > li a:focus,
    .flt-mod-01 .filters-list > li a:hover {
        display:inline-block;
        text-decoration: none;
        border: none;
        color: inherit;
        padding:5px 15px;
        background:#e5e5e5;
        border-radius:20px;
    }

    .flt-mod-01 .filters-list li a.active {
        background:#222;
        color:#fff;
    }

    .flt-mod-01 .filter-extended a,
    .flt-mod-01 .filter-extended a:active,
    .flt-mod-01 .filter-extended a:visited,
    .flt-mod-01 .filter-extended a:focus,
    .flt-mod-01 .filter-extended a:hover {
        display:inline-block;
        text-decoration: none;
        border: none;
        color: inherit;
        position:relative;
        padding:5px 15px;
        cursor:pointer;
		  background:#e5e5e5;
    }

    .flt-mod-01 .filter-extended .filter-extended-list {
        position:absolute;
        top:30px;
		  left:0;
        display:none;
        opacity:0;
        transition:all .3s ease;
    }
    .flt-mod-01 .filter-extended .filter-extended-list.in {
        display:block;
        opacity:1;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">   
  <div class="flt-mod-01 filters">
    <div class="filter-inner flex">
       <div class="filter-secondary">
          <div class="filter-extended">
            <a title="" id="filterExtendListToggle">More +</a>
            <ul class="filter-extended-list">
               <li><a href="" title="">Category</a></li>
            </ul>
          </div>
       </div>
    </div>
  </div>
</div>

标签： jquery