前端模拟下拉框（select）
摘要： web前端开发 浏览器兼容性问题 前端开发浏览器兼容测试工具 前端开发专用浏览器 html 代码 <!DOCTYPE html PUBLIC “-//W3C//DTD html 4.01 Transitional//EN”> <html> ……
| web前端开发 浏览器兼容性问题 |
| 前端开发浏览器兼容测试工具 |
| 前端开发专用浏览器 |
html 代码
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title></title>
<style type=”text/css”>
* {
padding: 0;
margin: 0;
}
ul,
li {
list-style: none;
}
.left {
float: left;
}
.right {
float: right;
}
.select_contain {
font-size: 14px;
color: #333;
line-height: 38px;
margin: 30px 0;
}
.select_item {
margin-right: 50px;
position: relative;
}
.select_tit {
margin-right: 20px;
}
.select_result {
width: 100px;
line-height: 38px;
border: 1px solid #ccc;
text-align: center;
border-radius: 4px;
text-indent: -8px;
cursor: pointer;
}
.select_result .triangle {
border: 5px solid transparent;
border-top: 5px solid #666;
position: absolute;
top: 16px;
right: 8px;
}
.select_item ul {
display: none;
position: absolute;
top: 100%;
right: 0;
width: 100px;
background: #f3f3f3;
border: 1px solid #ccc;
border-radius: 0 0 4px 4px;
border-top-color: #f3f3f3;
margin-top: -4px;
}
.select_item ul li {
text-align: center;
cursor: pointer;
}
.select_item ul li:hover {
background: #f4a100;
color: #fff;
}
</style>
<script>
function select() {
$(document).click(function() {
$(‘.select_module_con ul’).slideUp()
})
var module = $(‘.select_result’)
module.click(function(e) {
e.stopPropagation()
var ul = $(this).next()
ul.stop().slideToggle()
ul.children().click(function(e) {
e.stopPropagation()
$(this)
.parent()
.prev()
.children(‘span’)
.text($(this).text())
ul.stop().slideUp()
})
})
}
$(function() {
select()
})
</script>
</head>
<body>
<div class=”select_contain”>
<div class=”select_item clearfix left”>
<div class=”select_tit left”>选择节目:</div>
<div class=”select_module_con left”>
<div class=”select_result”>
<span>选择节目</span>
<div class=”triangle”></div>
</div>
<ul>
<li>节目1</li>
<li>节目2</li>
<li>节目3</li>
</ul>
</div>
</div>
<div class=”select_item clearfix left”>
<div class=”select_tit left”>选择嘉宾:</div>
<div class=”select_module_con left”>
<div class=”select_result”>
<span>选择嘉宾</span>
<div class=”triangle”></div>
</div>
<ul>
<li>嘉宾1</li>
<li>嘉宾2</li>
<li>嘉宾3</li>
</ul>
</div>
</div>
</div>
</body>
</html>
| 前端开发解决浏览器的兼容性问题 |
| 前端开发，不同浏览器的兼容 |
| 前端开发使用的浏览器 |
» 本文来自：前端开发者 » 《前端模拟下拉框（select）》
» 本文链接地址：https://www.rokub.com/6853.html
» 您也可以订阅本站：https://www.rokub.com
近期评论