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

最新推荐文章于 2024-08-08 20:55:06 发布
梁俊俊
最新推荐文章于 2024-08-08 20:55:06 发布
阅读量2.2k
点赞数
本文链接：https://blog.csdn.net/lj102800/article/details/52103554
版权
<!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>