jq 下拉框
阿新 • • 發佈：2018-12-05
<!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>