模拟自定义下拉菜单
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了模拟自定义下拉菜单相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8" /> <title></title> </head> <body> <style type="text/css"> .xmkc { width: 600px; margin: 0 auto; text-align: center; position: relative; } .wena { display: block; border: 1px solid #ddd; width: 320px; height: 26px; font-size: 12px; line-height: 26px; vertical-align: middle; margin: 0px; padding: 0px; cursor: pointer; } .classlist { width: 320px; border-left: 1px solid #ddd; border-bottom: 1px solid #ddd; border-right: 1px solid #ddd; position: absolute; z-index: 1; left: 0px; top: 28px; } .lis { display: block; margin: 0px; padding: 0px; } .lis a { display: block; width: 320px; height: 20px; font-size: 12px; padding-top: 8px; text-align: left; text-decoration: none; color: #333; outline: none; hide-focus: expression_r(this.hideFocus=true); } .lis a:hover { text-decoration: none; background-color: #00f452; color: #fff; } </style> <script type="text/javascript"> function $(x) { return document.getElementById(x); } function sh(x) { $(x).style.display = $(x).style.display ? "" : "none"; } function gets_value(str) { $(‘whole‘).value = str; sh(‘hh‘); } </script> <body> <div class="xmkc"> <input name="class" id="whole" type="text" class="wena" onClick="sh(‘hh‘)" value="你最喜欢吃的水果是" readonly="readonly" /> <div id="hh" style="display:none" class="classlist"> <div class="lis"><a href="#" onClick="gets_value(‘香蕉‘)">香蕉</a></div> <div class="lis"><a href="#" onClick="gets_value(‘苹果‘)">苹果</a></div> <div class="lis"><a href="#" onClick="gets_value(‘梨‘)">梨</a></div> <div class="lis"><a href="#" onClick="gets_value(‘水蜜桃‘)">水蜜桃</a></div> </div> <!--classlist --> </div> <!--xmkc --> </body> </html>
以上是关于模拟自定义下拉菜单的主要内容，如果未能解决你的问题，请参考以下文章