【发布时间】：2011-05-14 02:53:04
【问题描述】：
您好，我正在尝试使用一些处理显示和表单提交的 jQuery 制作一个主要是 CSS 下拉列表。我正在努力解决的一件事是使下拉列表不会将其他元素向下推。欢迎任何其他建议是我的代码（我知道根本不应该使用表格，但必须在旧版 UI 中适应它，所以请耐心等待）
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.js"> </script>
<style>
*{padding:0;margin:0;}
span.icon{
display:inline;
height:15px;
width:15px;
}
span.icon.left{
float:left;
padding-left:5px;
}
span.icon.right{
float:right;
padding-right:5px;
}
div.dropDown{
height:20px;
width:200px;
margin:10px;
padding:2px 0;
cursor:pointer;
border:1px solid #ccc;
border-radius:3px;
-webkit-border-radius:3px;
-moz-border-radius:3px;
background-color:#f5f5f5;
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(230,230,230)),
color-stop(0.84, rgb(255,255,255))
);
background-image: -moz-linear-gradient(
center bottom,
rgb(230,230,230) 0%,
rgb(255,255,255) 84%
);
}
div.dropDown:hover{
border:1px solid #777;
background-color:#eee;
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(255,255,255)),
color-stop(0.84, rgb(230,230,230))
);
background-image: -moz-linear-gradient(
center bottom,
rgb(255,255,255) 0%,
rgb(230,230,230) 84%
);
box-shadow:0px 0px 3px #ccc;
-moz-box-shadow:0px 0px 3px #ccc;
-webkit-box-shadow:0px 0px 3px #ccc;
}
div.dropDown span{padding-top:1px;}
span.dropHeader{
padding-left:10px;
color:#333;
text-shadow:1px 1px 0px #fff;
}
ul.optionList{
width:200px;
display:none;
border:1px solid #ccc;
border-radius:0px 0px 3px 3px;
-webkit-border-radius:0px 0px 3px 3px;
-moz-border-radius:0px 0px 3px 3px;
padding:5px 0;
box-shadow:1px 1px 5px #ccc;
-moz-box-shadow:1px 1px 5px #ccc;
-webkit-box-shadow:1px 1px 5px #ccc;
}
li.option{
list-style-type:none;
padding:3px 2px;
border:1px solid transparent;
border-bottom:1px solid #eee;
}
li.option:last-child {
border-bottom:0;
}
span.optTitle{
padding-left:10px;
color:#333;
}
li.option:hover{
background-color:#FB880C;
cursor:pointer;
border:1px solid #cf7310;
box-shadow:inset 0px 0px 6px #9e5303;
-moz-box-shadow:inset 0px 0px 6px #cf7310;
-webkit-box-shadow:inset 0px 0px 6px #cf7310;
}
li.option:hover span.optTitle{
color:#fff;
text-shadow:1px 1px 0px #9e5303;
}
input{clear:both}
img.dropArrow{width:10px;height:10px;}
.iconName1 {width:15px;height:15px;background:#333;border:1px solid #000;}
.iconName2 {width:15px;height:15px;background:#ccc;border:1px solid #333;}
</style>
</head>
<body> <br/><br/><br/><br/>
<form name="search" action="/">
<table><tr>
<td>
<div id="selectName" class="dropDown">
<span class="icon left"><img src="px.gif" id="sprite" class="iconName1" /></span>
<span class="dropHeader">Option1</span>
<span class="icon right"><img src="down-arrow.png" class="dropArrow" /></span>
</div>
<ul id="selectName" class="optionList">
<li id="value0" class="option">
<span class="icon left"><img src="px.gif" class="iconName1" /></span>
<span class="optTitle">Option1</span>
</li>
<li id="value1" class="option">
<span class="icon left"><img src="px.gif" class="iconName2" /></span>
<span class="optTitle">Option2</span>
</li>
<li id="value0" class="option">
<span class="icon left"><img src="px.gif" class="iconName1" /></span>
<span class="optTitle">Option3</span>
</li>
<li id="value1" class="option">
<span class="icon left"><img src="px.gif" class="iconName2" /></span>
<span class="optTitle">Option4</span>
</li>
</ul>
<input type="hidden" id="selectName2" name="selectName" value="" />
<!--[if IE 6]>
<select name="selectName">
<option value="value">Option1</option>
<option value="value">Option2</option>
<option value="value">Option3</option>
<option value="value">Option4</option>
</select>
<![endif]-->
<div id="selectName2" class="dropDown">
<span class="icon left"><img src="px.gif" id="sprite" class="iconName1" /></span>
<span class="dropHeader">Option1</span>
<span class="icon right"><img src="down-arrow.png" class="dropArrow" /></span>
</div>
<ul id="selectName2" class="optionList">
<li id="value0" class="option">
<span class="icon left"><img src="px.gif" class="iconName1" /></span>
<span class="optTitle">Option1</span>
</li>
<li id="value1" class="option">
<span class="icon left"><img src="px.gif" class="iconName2" /></span>
<span class="optTitle">Option2</span>
</li>
<li id="value0" class="option">
<span class="icon left"><img src="px.gif" class="iconName1" /></span>
<span class="optTitle">Option3</span>
</li>
<li id="value1" class="option">
<span class="icon left"><img src="px.gif" class="iconName2" /></span>
<span class="optTitle">Option4</span>
</li>
</ul>
<input type="hidden" id="selectName2" name="selectName" value="" />
<!--[if IE 6]>
<select name="selectName2">
<option value="value">Option1</option>
<option value="value">Option2</option>
<option value="value">Option3</option>
<option value="value">Option4</option>
</select>
<![endif]-->
</td></tr></table>
</form>
<script>
$(function(){
if($.browser.msie && $.browser.version == '6.0'){
$('div.dropDown').hide();
}
$('div.dropDown').hover(function(){
var ultoshow = $(this).attr('id');
$('ul#'+ultoshow).toggle();
});
$('li.option').click(function(){
var selectName = $(this).parent('ul.optionList').siblings('div.dropDown').attr('id');
var value = $(this).attr('id');
var optTitle = $(this).children('span.optTitle').html();
var iconClass = optTitle.toLowerCase();
$(this).parent('ul.optionList').siblings('div.dropDown').children('span.icon').children('img#sprite').attr('class',iconClass);
$(this).parent('ul.optionList').siblings('div.dropDown').children('span.dropHeader').html(optTitle);
$('input#'+selectName).attr('value',value);
document.search.submit();
});
});
</script>
</body>
</html>
【问题讨论】：
-
我通常在下拉菜单中看到
position: absolute;。 -
您需要支持哪种浏览器？我不确定我能否在 IE6 中解决这个问题，而且从您拥有
<!--[if IE 6]>的事实来看，您似乎需要 IE6 支持。 -
好吧，我不想使用大量的 javascript，因为应用程序已经很重，而且 css :hover 类在 IE6 中不起作用，所以我默认使用原生
标签： jquery html css drop-down-menu