我需要你的帮助,
我认为我的自制定制UL LI CSS菜单会很好用,除了一个小细节。当用户点击下拉列表时,下拉列表似乎将所有其他HTML元素移动到底部。
以下是有问题的HTML和CSS:
<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.11.3.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
* {
font-family: Segoe UI;
font-size: 9pt;
}
.select {
background: url(arrow.png) no-repeat scroll right top;
border: 1px solid rgb(170,170,170);
width: 180px;
padding: 3px;
}
.select:hover {
cursor: pointer;
border-color: rgb(112,112,112);
}
.select ul {
list-style-type: none;
margin: 0;
padding: 0;
cursor: pointer;
}
.select ul li {
display: none;
padding: 1px;
font-weight: normal;
}
.select ul li:hover {
background: rgb(112,146,190);
color: #FFF;
}
.selected {
background: rgb(195,195,195);
}
</style>
<script type="text/javascript">
window.onload = function() {
$(document).bind('click', function(e) {
var $clicked = $(e.target);
if (!$clicked.hasClass("select")) {
$(this).find('ul li').hide()
}
});
$(".select").click(function () {
$(this).find('ul li').toggle();
});
$(".select ul li").click(function(e) {
if (e.ctrlKey) {
e.stopPropagation()
if ($(this).hasClass('selected')) { $(this).removeClass('selected') }
else {
$(this).addClass('selected');
}
var c = $(this).parent().find("li.selected").length
$(this).closest("div").contents().first().replaceWith((c > 1)?"(" +c+ ")":$(this).text())
}
else {
$(this).closest("div").contents().first().replaceWith($(this).text());
var id = $(this).closest('[id]').attr('id');
$(this).closest('.select').find("ul li").removeClass('selected');
$(this).addClass('selected');
}
});
}
</script>
</head>
<body>
Numbers
<div class="select" id="reqtype">
<ul>
<li> </li>
<li data-val="Column1">Column1</li>
<li data-val="Column2">Column2</li>
<li data-val="Column3">Column3</li>
</ul>
</div>
<br><br>
Letters
<div class="select" id="letters">
<ul>
<li> </li>
<li>abcd</li>
<li>efgh</li>
<li>ijkl</li>
</ul>
</div>
<br><br>
Fruits
<div class="select" id="fruits">
<ul>
<li> </li>
<li>apples</li>
<li>bananas</li>
<li>oranges</li>
</ul>
</div>
</body>
</html>
答案 0 :(得分:2)
这是设置它的快速方法。在您的position: relative
上添加.select
.select {
background: url(arrow.png) no-repeat scroll right top;
border: 1px solid rgb(170,170,170);
width: 180px;
padding: 3px;
position: relative;
}
然后像这样更新你的第一个下拉菜单:
#reqtype ul {
position: absolute;
top: 23px;
width: 188px;
left: -1px; /*this is to address the 1px border*/
background: red;
z-index: 10
}
说实话,现在的代码似乎只是有一个基本的下拉菜单。我相信有更简单的方法可以用来实现你想要实现的目标。
Heres a working fiddle。希望有所帮助