下拉框点击显示,离开隐藏
/** * 下拉框点击显示与隐藏 */ $(document).click(function (event) { let $target = $(event.target).parents('.select-content'); let allSelectList = $('.calculator-condition .select-list'); if ($target.length === 1) { let $targetChild = $target.children('.select-list'); if ($targetChild.is(':visible')) { $targetChild.hide(); } else { allSelectList.hide(); $targetChild.show(); } } else { allSelectList.hide(); } });
html:
<div class="select-item"> <label class="select-label fl">按揭成数</label> <div class="select-content fl"> <div class="select-text"> <span>2成</span> <input type="text" name="" id="loanLevel" value="0.7" hidden> <i></i> </div> <ul class="select-list"> <li data-value="0.1">1成</li> <li data-value="0.2">2成</li> </ul> </div> </div>