jquery 实现自定义下拉菜单实现

来源：互联网发布：sony摄像机数据恢复编辑：程序博客网时间：2024/06/05 20:22
<!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>
0 0