jQuery实现横纵向菜单

最新推荐文章于 2023-09-30 16:53:16 发布

原创最新推荐文章于 2023-09-30 16:53:16 发布 · 904 阅读

0 ·

CC 4.0 BY-SA版权

js 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了如何利用jQuery实现横纵向菜单。通过示例代码展示了如何处理click()和hover()事件，以及使用next()和slideToggle()方法来切换菜单的显示和隐藏。示例包括横向和纵向两种类型的下拉菜单，简化了JavaScript操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

学了有一段时间的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;
}