jQuery实现点击选择框和选择按钮以外的地方 隐藏选择框
html:
<div class="calculator-condition"> <p class="sub-title">计算条件</p> <div class="select-item"> <label class="select-label fl">选择户型</label> <div class="select-content fl"> <div class="select-text"> <span></span> <input type="text" name="" id="" value="" hidden> <i></i> </div> <ul class="select-list"> <li>3室2厅1卫 约101m²</li> <li>3室2厅2卫 约111m²</li> </ul> </div> </div> <div class="select-item"> <label class="select-label fl">估算总价</label> <div class="select-content fl"> <div class="fixed-text"> <span class="price">52</span> <span class="text-color">万元</span> <span class="desc">(均价5100元/m² × 面积101m²)</span> <input type="text" name="" id="" value="" hidden> </div> </div> </div> <div class="select-item"> <label class="select-label fl">按揭成数</label> <div class="select-content fl"> <div class="select-text"> <span>7成</span> <input type="text" name="" id="" value="" hidden> <i></i> </div> <ul class="select-list"> <li>1成</li> <li>2成</li> <li>3成</li> </ul> </div> </div> <div class="select-item"> <label class="select-label fl">贷款类别</label> <div class="select-content fl"> <div class="select-text"> <span>商业贷款</span> <input type="text" name="" id="" value="" hidden> <i></i> </div> <ul class="select-list"> <li>商业贷款</li> <li>公积金贷款</li> <li>组合贷款</li> </ul> </div> </div> <div class="select-item"> <label class="select-label fl">贷款时间</label> <div class="select-content fl"> <div class="select-text"> <span></span> <input type="text" name="" id="" value="" hidden> <i></i> </div> <ul class="select-list"> <li>1年(期)</li> <li>2年(期)</li> <li>3年(期)</li> <li>4年(期)</li> <li>5年(期)</li> <li>6年(期)</li> <li>7年(期)</li> <li>8年(期)</li> <li>9年(期)</li> </ul> </div> </div> </div>
js:
$(document).ready(function () { $(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(); } }); });