jquery 实现自定义下拉菜单实现
2016-08-03 14:49
399 查看
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title> </title>
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/jquery-ui-1.10.3.min.js"></script>
<script src="js/jquery.fullPage.min.js"></script>
<style>
body{font-family:"方正兰亭黑简体";margin:0px;padding:0px}
.title-name {
background: #4f9ae4 none repeat scroll 0 0;
height: 35px;
left: 0;
padding-bottom: 10px;
padding-top: 16px;
text-align: center;
top: 0;
width: 100%;
z-index: 500;
color:#fff;
font-size:20px;
line-height:30px;
position: fixed;
}
div{font-size:16px}
input:focus { outline:none;
}
.main{margin-top: -20px;
width: 32px;
padding: 0px 22px;
background: rgba(247,180,85,0.8);
color: #909090;
float: left;
position: fixed;}
.main2{ margin-top: -88px;
padding: 53px 5px 5px 5px;
background: rgba(247,180,85,0.8);
width: 65px;
vertical-align: top;
float: left;
position: fixed;
font-size: 12px;
text-align: center;
color: #909090;}
li{
width:95%;
color: #4c4c4c;
cursor: pointer;
list-style-type: none;
line-height:40px;
background:#fff;
border-bottom:#b6b6b6 1px solid;
border-left:#b6b6b6 1px solid;
border-right:#b6b6b6 1px solid;
padding-left:5%;
}
.d3{
z-index:1000;
}
.d4{
display:none;
z-index:1000;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$(".d1").click(function(){
$(this).parent().siblings().find(".d3").removeClass().addClass("d4");
if($(this).next().attr("class")=="d3")
$(this).next().removeClass().addClass("d4");
else
$(this).next().removeClass().addClass("d3");
});
$("li").mouseover(function(){
$(this).siblings().css("background","#fff");
$(this).siblings().css("color","#4c4c4c");
$(this).css("background","#4f9ae4");
$(this).css("color","#fff");
});
$("li").click(function(){
$(".d3").removeClass().addClass("d4");
$(this).parent().prev().html($(this).text());
});
});
</script>
</head>
<div class="container header">
<body style="background:#efeff4">
<img width="11" border="0" alt="" style="float: left;margin-left:5%;position: fixed;z-index:541;top:19px " src="images/icon01.png">
<img width="22" border="0" alt="" style="float: right;right:5%;margin-right:0px; ;position: fixed;z-index:541;top:19px " src="images35/icon01.png">
<div class="title-name">
<span style=" ; ">发布</span>
</div>
<div style=" ;padding:60px 5% 0px 5%;background:#fff ">
</div>
<div style="position:relative;margin-top:20px;margin-left:5%;width:90%">
<div class="d1" style=";background:url(images35/photo04.png) ; line-height:40px;background-size:100% 40px; background-repeat:no-repeat; padding-left:30px">请选择保修类型</div>
<div class="d4" style="position:absolute; left:0; top:40px;width:100%">
<li>分类二</li>
<li>分类二</li>
<li>分类二</li>
<li>分类二</li>
<li style="border-bottom-left-radius:10px;border-bottom-right-radius:10px">分类二</li>
</div>
</div>
<div style="position:relative;margin-top:20px;margin-left:5%;width:90%">
<div class="d1" style=";background:url(images35/photo04.png) ; line-height:40px;background-size:100% 40px; background-repeat:no-repeat; padding-left:30px">请选择保修类型</div>
<div class="d4" style="position:absolute; left:0; top:40px;width:100%">
<li>分类二</li>
<li>分类二</li>
<li>分类二</li>
<li>分类二</li>
<li style="border-bottom-left-radius:10px;border-bottom-right-radius:10px">分类二</li>
</div>
</div>
<div style="position:relative;margin-top:20px;margin-left:5%;width:90%">
<div class="d1" style=";background:url(images35/photo04.png) ; line-height:40px;background-size:100% 40px; background-repeat:no-repeat; padding-left:30px">请选择保修类型</div>
<div class="d4" style="position:absolute; left:0; top:40px;width:100%">
<li>分类二</li>
<li>分类二</li>
<li>分类二</li>
<li>分类二</li>
<li style="border-bottom-left-radius:10px;border-bottom-right-radius:10px">分类二</li>
</div>
</div>
<div style="margin-top:20px;width:100%;padding-left:5%;font-size:14px;line-height:40px;background:#d6d7dc;height:40px">文字描述</div>
<textarea maxlength="500" name="" style="margin-left:5%;margin-top:10px;width:90%;border:1px #d6d7dc solid; ;background:#fff;;height:130px;color:#909090;line-height:30px;font-size:18px" placeholder="长度1-500个字之间" type="text"></textarea>
<div style="margin:0px ;margin-top:20px;margin-left:5%;width:90%">
<div style="float:left;margin-right: 10px;">
<IMG SRC="images13/photo02.png" WIDTH="75px" height="85px" BORDER="0" ALT="" style=" ">
<span class="main">主图</span>
<div class="main2" style="display:none">图片上传中0%</div>
<IMG SRC="images19/icon03.png" WIDTH="18" BORDER="0" ALT="" style=" vertical-align: top; margin-left: 65px; margin-top: -95px; float: left; position: absolute; z-index: 999;">
</div>
<div style="float:left;margin-right: 10px;">
<IMG SRC="images13/photo02.png" WIDTH="75px" height="85px" BORDER="0" ALT="" style=" ">
<span class="main" style="display:none">主图</span>
<div class="main2">图片上传中0%</div>
<IMG SRC="images19/icon03.png" WIDTH="18" BORDER="0" ALT="" style=" vertical-align: top; margin-left: 65px; margin-top: -95px; float: left; position: absolute; z-index: 999;">
</div>
<div style="float:left;margin-right: 10px;">
<IMG SRC="images13/photo02.png" WIDTH="75px" height="85px" BORDER="0" ALT="" style=" ">
<span class="main" style="display:none">主图</span>
<div class="main2">图片上传中0%</div>
<IMG SRC="images19/icon03.png" WIDTH="18" BORDER="0" ALT="" style=" vertical-align: top; margin-left: 65px; margin-top: -95px; float: left; position: absolute; z-index: 999;">
</div>
<div style="float:left; ;width:75px;height:70px;text-align: center;background:#c6c7cc;padding-top:15px">
<IMG SRC="images19/icon04.png" WIDTH="42px" BORDER="0" ALT="" style=" ">
<div style="font-size:16px;color:#505050;margin-top:0px;">添加图片</div>
</div>
</div>
</div>
<div style="border-radius:5px;color:#fff;width:90%;margin-left:5%;line-height: 35px;text-align: center;height:35px;background:#4f9ae4 ; font-size:18px;float:left;bottom: 10px; position: fixed;">提交</div>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- javaScript模拟select下拉菜单，满足自定义select样式的需求+jquery实现
- jquery实现下拉菜单一例
- 简单自定义实现jQuery验证
- 用jquery实现下拉菜单效果的代码
- 基于jquery的用dl模拟实现可自定义样式的SELECT下拉列表(已封装)
- 一个用jquery实现的下拉菜单
- JQuery实现自定义对话框
- 用jquery实现自定义风格的滑动条实现代码
- 用js实现的模拟jquery的animate自定义动画(2.5K)
- 自定义SWT日历控件及其下拉菜单组件的实现
- 页面下拉菜单实现(Jquery 协助实现)
- JQuery实现自定义对话框的代码
- CSS + jQuery 实现的超 Sexy 下拉菜单
- jquery实现ajax下拉菜单联动
- 一个用jquery实现的下拉菜单
- 简单自定义实现jQuery验证
- Jquery实现的下拉菜单
- jQuery+CSS 实现的超Sexy下拉菜单
- jQuery实现页面模块拖拽与模块自定义效果.rar
- 简单自定义实现jQuery验证