zoukankan      html  css  js  c++  java
  • 自定义:下拉框点击显示隐藏

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

    /**
         * 下拉框点击显示与隐藏
         */
        $(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>
  • 相关阅读:
    Photoshop
    前端性能优化
    Angular Cli和npm、node.js命令
    Angular项目结构
    页面布局
    滚动条与height
    1.2 Angular入门
    前端的e2e测试
    Angular的部署
    jQuery插件开发的基本形式
  • 原文地址:https://www.cnblogs.com/Nyan-Workflow-FC/p/13502843.html
Copyright © 2011-2022 走看看