先看一下效果图,再决定是否接着往下看
二级菜单的实现,先编写HTML结构
<ul class="t1 fl">
<li>一级菜单
<ul class="t2">
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
<li>一级菜单
<ul class="t2">
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
<li>一级菜单
<ul class="t2">
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
<ul>
方法一、用CSS实现二级菜单
*{
padding:0;
margin:0; /*清除所有元素的padding和margin*/
}
li{
list-style:none; /*清除所有li前面的黑点*/
background:black;
color:white;
text-align:center;
line-height:30px;
}
ul.t1{
width:300px;
height:30px; /*给class="t1"的ul设置宽高*/
}
.fl > li{ /*选择class="fl"元素的子元素中的li,即一级菜单栏左浮动*/
float:left;
}
.t1 > li{
width:30%;
margin-left:2%;
}
.t2 li{
display:none; /*二级菜单栏隐藏*/
}
.t1 > li:hover{
background: #891298; /*:hover伪类,当时鼠标移动上去显示*/
}
.t1 >li:hover .t2 li{
display:block; /*当鼠标移动到.t1的子元素li上,.t2的子孙元素li显示*/
}
.t2 li:hover{
background:#50a3a2;
}
知识点:
1、css选择器:
ul.t1 //中间没有空格,表示选择class=”t1”的ul
.t2 li // 中间有空格,表示选择class=“t2”元素下的子孙后代元素中的li元素
.t2 > li //中间有>号,表示选择class=“t2”元素的子元素中的li;只涉及到子元素这一代
关于伪类:hover前面不能有空格;
.t1 li:hover{color:red;} //表示鼠标移动到.t1下的li元素上,改变该元素的字体颜色
.t1 > li:hover .t2 li{ color:green;} //表示鼠标移动到.t2下的子元素li上,改变.t1下的li样式
方法二:用JS实现二级菜单
CSS部分:
*{
padding:0;
margin:0;
}
ul.t1{
width:300px;
height:30px;
}
li{
list-style:none;
line-height:30px;
text-align:center;
color:white;
}
}
.fl > li{
float:left;
}
.t1 > li{
width:30%;
margin-left:2%;
background:black;
}
.t1 > li:hover{
background: #891298;
}
.t2 > li{
background:#50a3a2;
}
.t2 > li:hover{
opacity: 0.9;
}
javascript部分:
window.onload=hide; /*一开始执行hide()方法,将二级标题隐藏*/
/*用js实现二级标题*/
function show(_this){
var t2=_this.getElementsByClassName("t2"); /*选取_this下的class="t2"的元素*/
t2[0].style.display = "block"; /*因为通过class获取可能有很多个元素,所以会保存成数组*/
}
function hide(){
var t2=document.getElementsByClassName("t2");
for(var i=0;i<t2.length;i++){
t2[i].style.display ="none";
}
}
HTML部分:
<ul class="t1 fl" >
<li onmouseover="show(this)" onmouseleave="hide()">一级标题
<ul class="t2">
<li>二级标题</li>
<li>二级标题</li>
<li>二级标题</li>
</ul>
</li>
<li onmouseover="show(this)" onmouseleave="hide()">一级标题
<ul class="t2">
<li>二级标题</li>
<li>二级标题</li>
<li>二级标题</li>
</ul></li>
<li onmouseover="show(this)" onmouseleave="hide()">一级标题
<ul class="t2">
<li>二级标题</li>
<li>二级标题</li>
<li>二级标题</li>
</ul></li>
</ul>
知识点:
通过标签名(TagName)和类名(ClassName)获取的元素都以数组形式保存,如果里面就一个元素,就用索引值为0选择;如果有很多个,要给里面所有的元素修改样式,则需要遍历;
三、用jQuery方法实现二级菜单
css部分与上一个相同,html部分去掉li中的绑定事件
javascript部分:
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javscript">
$(function(){
hide(); /*DOM元素加载完就执行隐藏函数*/
});
function hide(){
$(".t2").css("display","none"); /*隐藏函数,就是将二级菜单隐藏*/
}
/*以下是第二部分*/
$(".t1 li").mouseenter(
function(){
$(this).find(".t2").css("display","block"); /*鼠标移动到.t1 li上就执行显示函数*/
}
);
$(".t1 li").mouseleave(
function(){
hide(); /*鼠标离开后又隐藏*/
}
);
/*第二部分结束*/
</script>
此时出现了一些问题,当我鼠标移动到二级标题上,即完全移出了一级标题,二级标题就不显示。经过调试查询资料,明白了,mouseenter和mouseover的区别;
mouseenter:只有鼠标穿过被选元素才会触发该事件。对应mouseleave
mouseover:当鼠标闯过被选元素或者其子元素都会触发事件。对应mouseout
上面的第二部分代码还可以用hover方法实现第二张图的效果(当然这个是错误效果):
$(".t1 li").hover(
function(){
$(this).find(".t2").css("display","block"); /*鼠标移动到.t1 li上就执行显示函数*/
},
function(){
hide();
}
);
得出结论:hover = mouseenter + mouseleave
现在给出正解:将第二部分处的mouseenter换为mouseover即可。
jQuery还有一种方法:
window.onload= function(){
$(".t2").hide(10);
}
$(function(){
$(".t1 li").hover(
function(){
$(this).find(".t2").show(10);
},
function(){
$(this).find(".t2").hide(8);
/*jQuery自带的方法;show()和hide(),显示隐藏,里面的参数是速度,ms为单位*/
}
);
});