自定义:下拉框点击显示隐藏

下拉框点击显示,离开隐藏

/**
     * 下拉框点击显示与隐藏
     */
    $(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>

 

posted @ 2020-08-14 16:12  Nyan  阅读(490)  评论(0编辑  收藏  举报