jquery:如何松开焦点，使其再次触发

Question

当下拉菜单打开时(onFocus(，我应用一个类，当单击任何下拉菜单时，我删除该类。

但是，问题是focus被触发一次。但我需要多次触发它。我的意思是，只要下拉列表是打开的，我就需要应用active类。

这是我的代码

$('body').on('focus', '.test', function () {
$('.select').toggleClass('active');
console.log('hello');
});
$('#slct').click(function () {
$('.test').blur();
$('.select').removeClass('active');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="test">
<div class="select">
<select name="slct" id="slct">
<option class="default_option" value="A">A</option>
<option value="AAAA">AAAA</option>
<option value="CNAME">CNAME</option>
<option value="MX">MX</option>
<option value="NS">NS</option>
<option value="PTR">PTR</option>
<option value="SOA">SOA</option>
<option value="SRV">SRV</option>
<option value="TXT">TXT</option>
<option value="CAA">CAA</option>
</select>
</div>
</div>

Answer 1

$('#slct').on('change', function () {
console.log('You select '+this.value);
$(this).parents('.select').removeClass('active');
$(this).blur();
});
$('#slct').focus(function(){
$(this).parents('.select').addClass('active');
});
$('#slct').blur(function(){
$(this).parents('.select').removeClass('active');
});

.test{
border:1px solid red;
}
.select.active{
background:red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="test">
<div class="select">
<select name="slct" id="slct">
<option class="default_option" value="A">A</option>
<option value="AAAA">AAAA</option>
<option value="CNAME">CNAME</option>
<option value="MX">MX</option>
<option value="NS">NS</option>
<option value="PTR">PTR</option>
<option value="SOA">SOA</option>
<option value="SRV">SRV</option>
<option value="TXT">TXT</option>
<option value="CAA">CAA</option>
</select>
</div>
</div>