abstract：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery导航</title> <script type="text/
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery导航</title>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<!--CSS样式-->
<style type="text/css">
*{margin: 0px;padding: 0px;}
a{text-decoration: none;}
.triangle-right {
width: 0;
height: 0;
border-left: 20px solid #FF7800;
border-bottom: 20px solid transparent;
border-top:2px dotted #333333;
display: inline-block;
margin-top:10px;
vertical-align: top;
}
.mynav
{
font-family:"Microsoft Yahei";
-webkit-font-smoothing: subpixel-antialiased;
margin:10px 2%;
width:90%;
display:flex;
}
.nav-left{
flex:auto;
font-size:20px;
font-weight: 700;
text-align: center;
background-color:#666666 ;
color:#FF7800;
border-right:3px solid #FF7800;
width:80px;
padding-top:40px;
}
.nav-right{
flex:auto;
width:90%
}
.nav-right div{
position:relative;
}
.cap{
display:inline-block;
width:80px;
height:30px;
background-color: #FF7800;
margin:10px 0;
border-bottom:2px dotted #333333;
border-top:2px dotted #333333;
text-align: center;
}
.child{
display:inline-block;
width:0px;
border-top:2px dotted #333333;
vertical-align: top;
margin-top: 10px;
}
span.cap-child
{
position:absolute;
border:2px solid #333333;
background-color: #505050;
color: #ffffff;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
/*top:5px;*/
left:0px;
}
span.cap-child a{
font-size:15px;
color:white;
}
span.cap-child a:hover{
color: #ffc8aa;
}
.hr-over{
position:absolute;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background-color: #FF7800;
width:20px;
height:20px;
margin-top:-10px;
border:1px solid #333333;
}
.showit{
animation: cho-show .5s;
}
@keyframes cho-show {
0% {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 1, 45deg);
opacity:0;
}
100% {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: none;
transform: none;
opacity:1;
}
}
</style>
</head>
<body>
<!--页面布局-->
<div class="mynav">
<div class="nav-left">
前<br><br>端
</div>
<div class="nav-right" >
<div >
<span class="cap ">HTML</span><div class="triangle-right"></div>
<div class="child">
</div>
</div>
<div >
<span class="cap">CSS</span><div class="triangle-right"></div>
<div class="child">
</div>
</div>
<div >
<span class="cap">JavaScript</span><div class="triangle-right"></div>
<div class="child">
</div>
</div>
</div>
</div>
<script type="text/javascript">
var active='';
var space=80;
var myNodes =[{ name:'HTML',
children: [{name:'HTML头部',url:'#'},
{name:'HTML实体',url:'#'},
]},
{name:'CSS',
children: [{name:'CSS 样式',url:'#'},
{name:'CSS 选择器',url:'#'},
]},
{name:'JavaScript',
children: [{name:'JS DOM',url:'#'},
{name:'JS 对象',url:'#'}
]}
];
$('.cap').hover(function(){
var cap=this;
var mybox=$(cap.parentNode).find('.child');
if(active!=this.innerHTML)
{
//变色
$(cap).css('background-color','#ffc8aa');
$(cap).next().css('border-left-color','#ffc8aa');
//清理原来的内容
for(var j=0;j<$('.child').length;j++)
{
//console.log($('.child')[j]);
$($('.child')[j]).empty();
$($('.child')[j]).css('width','0px');
}
active=this.innerHTML;
myNodes.forEach(function(item){
if(active==item.name)
{
myAnimate(item.children,mybox);
}
}
);
}
//顺序显示
orderShow($(mybox),$(mybox).children().length-1);
}, function(){
//变色
$(this).css('background-color','#FF7800');
$(this).next().css('border-left-color','#FF7800');
});
function myAnimate(arr,ele)
{
// console.log(ele);
var $ele=$(ele);
var pos;
arr.forEach(function(item,index){
pos=space*index+20;
addOne(item,pos+'px');
});
$ele.animate({width:pos+100+'px'},200,'linear',function(){
var left=pos+80+'px';
$ele.append("<span class='hr-over' style='left:"+left+"'></span>");
});
function addOne(item,pos)
{
var mylink="<a href='"+item.url+"'>"+item.name+"</a>";
$ele.append("<span class='cap-child' style='display:none;left:"+pos+"'>"+mylink+"</span>")
}
}
function orderShow($it,times)
{
if(times>=0)
{
setTimeout(function(){
$($it.children()[times]).css('display','block')
$($it.children()[times]).addClass('showit');
orderShow($it,times-1)
},100);
}
else
return;
}
</script>
</body>
</html>
Correcting teacher：查无此人Correction time：2019-04-08 16:07:54
Teacher's summary：完成的不错。js语句每行最后增加;号，看到你的有一些没增加。继续加油。