jQuery實現橫縱向菜單

原創

serina

2020-02-20 20:42

學了有一段時間的js，jQuery,不過作爲js的一個類庫，jQuery在js中的角色是舉足輕重的，

jquery真的很強大，就像它的一句代言詞：write less，do more

下面我就獻醜一下，剛剛用jQuery實現的橫縱向菜單

比如：在js中首先找到發生a事件的b元素

1.a有click()事件，第一種橫向的是通過鼠標點擊發生的下拉菜單

也有hover()事件，第二種縱向的是通過a:hover發生的下拉菜單

2.b通過$(".main>a")，在jq中" > "指父子關係

3.然後 $(this).next("ul")是在.main>a元素緊鄰的後面同輩元素的元素集合

主要看js代碼

// JavaScript Document
$(document).ready(function(e) {
$(".main>a").click(function(){
var ulNode=$(this).next("ul");
//第一種比較繁瑣
/*if(ulNode.css("display")=="none"){
ulNode.css("display","block");
}
else{
ulNode.css("display","none");
}

//第二種較繁瑣
if(ulNode.css("display")=="none"){
ulNode.show(500);
}
else{
ulNode.hide(500);
}
//第三種很好
ulNode.toggle(300);*/
//第四種更好
ulNode.slideToggle("normal");
});

$(".hmain>a").hover(function(){
$(this).next("ul").slideToggle();
});

});

html，css代碼很簡單哦

css代碼

ul {
list-style-type: none;
}
ul, li {
margin: 0px;
padding: 0px;
}
#ul1 {
width: 100px;
}

.main,.hmain {
background-color: #666;
width: 100px;
}
.main li,.hmain li {
background-color: #CCC;
}
a {
text-decoration: none;
display: block;
padding-left: 20px;
}
.main a,.hmain a {
color: #FFF;
background-image: url(../../ImageTransitions/ImageTransitions/images/arrow.png);
background-repeat: no-repeat;
background-position: 0px center;
padding-top: 4px;
padding-right: 4px;
padding-bottom: 4px;
}

.main li a,.hmain li a {
color: #333;
background-image: none;
}
.ul2 {
display: none;
}
#hul {
position: relative;
}
.hmain {
float: left;
margin-right:2px;
width: 100px;
background-color: #666;
}