求大神给写个JS的模拟下拉列表,不要那种纯js的!
发布网友
发布时间：2022-04-21 17:23
共3个回答
热心网友
时间：2022-04-21 18:52
<html>
<head>
<title>yugi</title>
<meta charset=UTF-8 />
<style type="text/css">
* {
border: 0;
padding: 0;
margin: 0;
}
body {
font: 14px/24px arial, "\5b8b\4f53", sans-serif, "Microsoft YaHei",
tahoma;
color: #333;
}
.grid-r {
display: inline;
float: right;
}
span.ik-combobox {
border: 1px solid #CCC;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background: #FFF;
display: inline-block;
line-height: 22px;
}
.ik-combobox {
font-size: 0;
line-height: 0;
display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block;
vertical-align: middle;
border: 1px solid #DFDFDF;
border-radius: 3px;
box-shadow: 0 4px 6px -4px rgba(0, 0, 0, 0.2);
padding: 1px 0;
overflow: hidden;
background-color: #FFF;
}
.ui-helper-hidden-accessible {
border: 0;
clip: rect(0, 0, 0, 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
span.ik-combobox {
line-height: 22px;
}
span.ik-combobox input {
height: 20px;
margin-left: -1px;
padding-left: 13px;
line-height: 20px;
font-size: 12px;
color: #666;
background: #FFF;
height: 19px\0;
width: 86px;
float: left;
}
span.ik-combobox .ik-combobox-toggle:hover {
border-left-color: #256EFF;
background-position: -15px 0;
}
span.ik-combobox .ik-combobox-toggle {
margin-top: 4px;
float: left;
display: block;
width: 15px;
height: 15px;
overflow: hidden;
background: url(../images/xiala.gif) no-repeat 0 0;
margin-right: 4px;
outline: 0;
}
.ik-combobox .ik-combobox-toggle {
background-position: -943px -327px;
}
.ik-combobox .ik-combobox-toggle {
display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block;
vertical-align: middle;
width: 35px;
height: 35px;
outline: 0;
cursor: pointer;
background-repeat: no-repeat;
}
ul.ik-combobox-menu {
border: 1px solid #CCC;
border-top: 0;
list-style: none;
overflow: auto;
background: #FFF;
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px;
}
ul.ik-combobox-menu,ul.ik-combobox-menu .ui-menu-item {
padding: 0;
margin: 0;
}
ul.ik-combobox-menu {
display: none; border-color : #DFDFDF;
overflow-y: auto;
overflow-x: hidden;
max-height: 130px;
border-color: #DFDFDF;
}
.ui-autocomplete {
font-family: arial, tahoma, "Microsoft YaHei", "\5b8b\4f53";
border: 1px solid #817F82;
background: #FFF;
border-top: 0;
}
a.ui-corner-all:hover {
background-color: #EBEBEB;
text-decoration: none;
cursor: pointer;
}
.ui-widget-content {
border: 1px solid #DDD;
background: #FFF;
color: #444;
}
.ui-widget {
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
}
.ui-autocomplete {
cursor: default;
min-width: 116px;
top: 192px;
width: 117px;
left: 992px;
}
.ui-front {
z-index: 1001;
}
ul.ik-combobox-menu .ui-menu-item {
font-size: 12px;
cursor: default;
}
ul.ik-combobox-menu .ui-menu-item a {
padding-left: 13px;
}
ul.ik-combobox-menu .ui-menu-item a {
color: #666;
font-weight: 400;
white-space: nowrap;
}
.ui-autocomplete .ui-menu-item a {
color: #000;
display: block;
height: 26px;
padding: 0 8px;
font-weight: 700;
line-height: 26px;
}
</style>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript">
jQuery (function ($)
{
var select = $ ("#answer-change"), menu = $ ("#ui-id-1");
var cbox = $ (".ik-combobox :text").val (menu.find ('a:first').text ());
$ (".ik-combobox-toggle").click (function ()
{
menu.slideToggle ();
});
$ ("a.ui-corner-all").click (function ()
{
cbox.val ($ (this).text ());
menu.hide ();
});
});
</script>
</head>
<body>
<div class="grid-r">
<select id="answer-change" style="display: none;">
<option value="1">提交成功的回答</option>
<option value="2">提交中回答</option>
<option value="3">提交失败回答</option>
<option value="4">失效回答</option>
</select> <span class="ik-combobox"> <span class="ui-helper-hidden-accessible"> 4 results are available, use up and down arrow keys to
navigate. </span><input readonly="readonly" class="ik-combobox-input ui-autocomplete-input" autocomplete="off" style="width: 86px;"><a
tabindex="-1" class="ik-combobox-toggle"></a> </span>
<ul class="ui-autocomplete ui-front ui-menu ui-widget ui-widget-content ui-corner-all ik-combobox-menu" id="ui-id-1">
<li class="ui-menu-item"><a class="ui-corner-all">提交成功的回答</a>
</li>
<li class="ui-menu-item"><a class="ui-corner-all">提交中回答</a>
</li>
<li class="ui-menu-item"><a class="ui-corner-all">提交失败回答</a>
</li>
<li class="ui-menu-item"><a class="ui-corner-all">失效回答</a>
</li>
</ul>
</div>
</body>
</html>
xiala.gif
热心网友
时间：2022-04-21 20:10
追答
o,知道了.密码就是你问问题 的标题了。大概就是这样。自己改改
