jq 下拉框

Posted 2021-01-25 chen527

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jq 下拉框相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style type="text/css">
        /*下拉开始*/
        
        .assetrecords .c2c-all {
            width: 100%;
            /*height: 32px;*/
            display: block;
            position: relative;
        }
        
        .assetrecords .item {
            width: 160px;
            height: 32px;
            background: #202e58;
            line-height: 32px;
            /*border-left: 1px solid #2a404f;*/
            cursor: pointer;
            border: 1px solid #495d9a;
            border-radius: 3px;
        }
        
        .assetrecords .c2c-alla {
            margin-left: 10px;
            font-size: 14px;
            color: #d6ddff;
        }
        
        .assetrecords .c2c-as {
            padding-left: 10px;
            font-size: 14px;
            color: #FFFFFF
        }
        
        .assetrecords .c2c-as:hover {
            background: #495689;
        }
        
        .assetrecords .c2c-son {
            display: none;
            background-color: #15284c;
            width: 160px;
            position: absolute;
            top: 32px;
            z-index: 1;
        }
        
        .assetrecords .item {
            position: relative;
        }
        
        .assetrecords .coinbig-c2c-sanj {
            width: 0;
            height: 0;
            border-width: 7px;
            border-style: solid;
            border-color: #ffffff transparent transparent transparent;
            background: #202e58;
            position: absolute;
            right: 9px;
            top: 13px;
        }
        
        .assetrecords .coinbig-c2c-sanj-shang {
            width: 0;
            height: 0;
            border-width: 7px;
            border-style: solid;
            border-color: #ffffff transparent transparent transparent;
            background: #12212f;
            position: absolute;
            right: 9px;
            top: 16px;
        }
        
        .assetrecords .c2c-son-input {
            width: 150px;
            height: 32px;
            line-height: 30px;
            border: 1px solid #495d9a;
            margin: 5px auto 0;
        }
        
        .assetrecords .c2c-son-input-les {
            float: right;
            width: 12px;
            height: 12px;
            margin-top: 11px;
            margin-right: 5px;
        }
        
        .assetrecords .c2c-son-inputs {
            width: 110px;
            height: 100%;
            padding-left: 10px;
            background: #15284c;
            border: none;
            color: #FFFFFF;
            font-size: 14px;
        }
        /*下拉结束*/
    </style>

    <body class="assetrecords">
        <div class="item">
            <div class="c2c-all">
                <span class="c2c-alla" style="position: relative">二级</span><span><div class="coinbig-c2c-sanj"></div></span>
            </div>
            <div class="c2c-son">
                <div class="c2c-son-input">
                    <img class="c2c-son-input-les" src="../static/images/fdj.png" />
                    <input class="c2c-son-inputs" type="text" />
                </div>
                <div class="c2c-as">11</div>
                <div class="c2c-as">222</div>
                <div class="c2c-as">33</div>
            </div>
        </div>



        //引入 jq  别忘记了



        <script type="text/javascript">
            $(‘.c2c-all‘).on(‘click‘, function(e) {
                var dis = $(this).parents(‘.item‘).find(‘.c2c-son‘).css(‘display‘)
                $(‘.c2c-son‘).slideDown(100).css(‘display‘, ‘none‘)
                $(this).parents(‘.item‘).find(‘.c2c-son‘).css(‘display‘, dis == ‘block‘ ? ‘none‘ : ‘block‘);
                e.preventDefault();
                e.stopPropagation();
            })

            //            $(document).on(‘click‘, function() {
            //                $(‘.c2c-son‘).css(‘display‘, ‘none‘)
            //            })

            $(‘.c2c-as‘).on(‘click‘, function() {
                $(this).parents(‘.item‘).find(‘.c2c-alla‘).text($(this).text());
            })

            $(‘.c2c-as‘).on(‘click‘, function() {
                $(‘.c2c-son‘).css(‘display‘, ‘none‘)
            })
        </script>
    </body>

</html>

以上是关于jq 下拉框的主要内容，如果未能解决你的问题，请参考以下文章

带有 jQuery 的 Rails 中的动态下拉（选择框）菜单不可逆

jQ给下拉框绑定事件，为什么要绑定在框(select标签)上，而不是绑定在选项(option标签)上