使用jquery做的伸缩菜单

最新推荐文章于 2021-08-06 13:43:03 发布

马路边的人工智能

最新推荐文章于 2021-08-06 13:43:03 发布

阅读量348

点赞数

分类专栏： jquery js 文章标签： jQuery JavaScript CSS ViewUI

本文链接：https://blog.csdn.net/dnlaomu/article/details/83524682

版权

jquery js 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
	$(function(){
		//找到所有li标记中包含的ul标记
		//然后找到它的前一个标记（即<a>）,并添加click事件
		$("li").find("ul").prev().click(function(){
			//单击时让后面的兄弟切换样式
			$(this).next().toggleClass("myHide");
		});
	});
</script>
<style type="text/css">
#navigation{
	width:200px;
}
a{
	outline:none;
}
/*主菜单样式*/
#navigation > ul{
	list-style-type:none;/*不显示项目符号*/
	margin:0;
	padding:0;
}
#navigation > ul > li{
	border-bottom:1px solid #FFFFFF;
}
#navigation > ul > li > a{
	display:block;
	padding:5px 5px 5px 0.5em;
	text-decoration:none;
	border-left:12px solid #003300;/*左侧粗边阴影*/
	border-right:1px solid #003300;/*右侧边阴影*/
}
#navigation > ul > li > a:link,#navigation > ul > li > a:visited{
	background-color:#006633;
	color:#FFFFFF;
}
#navigation > ul > li > a:hover{
	background-color:#003300;
	color:#FFFF00;
}

/*子菜单样式*/
#navigation ul li ul{
	list-style-type:none;/*不显示项目符号*/
	margin:0;
	padding:0;
}
#navigation ul li ul li{
	border-bottom:1px solid #FFFFFF;
}
#navigation ul li ul li a{
	display:block;
	padding:5px 5px 5px 0.5em;
	text-decoration:none;
	border-left:12px solid #FF0000;/*左侧粗边阴影*/
	border-right:1px solid #FF0000;/*右侧边阴影*/
}
#navigation ul li ul li a:link,#navigation ul li ul li a:visited{
	background-color:#FF3333;
	color:#FFFFFF;
}
#navigation ul li ul li a:hover{
	background-color:#FF0000;
	color:#FFFF00;
}

#navigation ul li ul.myHide{
	display:none;
}
</style>
<body>
<div id="navigation">
	<ul id="listUL">
		<li><a href="#">home</a></li>
		<li><a href="#">news</a>
			<ul>
				<li><a href="#">lasttestnews</a></li>
				<li><a href="#">allnews</a></li>
			</ul>
		</li>
		<li><a href="#">sports</a>
			<ul>
				<li><a href="#">basketball</a></li>
				<li><a href="#">football</a></li>
				<li><a href="#">volleyball</a></li>
				<li><a href="#">goodball</a></li>
			</ul>
		</li>
		<li><a href="#">weather</a>
			<ul>
				<li><a href="#">today's weather</a></li>
				<li><a href="#">forecast</a></li>
			</ul>
		</li>
		<li><a href="#">call me</a></li>
	</ul>
</div>
</body>

马路边的人工智能

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
使用jquery做的伸缩菜单

&lt;script language="javascript" src="jquery.min.js"&gt;&lt;/script&gt;&lt;script language="javascript"&gt; $(function(){ //找到所有li标记中包含的ul标记 //然后找到它的前一个标记（即&lt;a&gt;）,并添加click事件 $(&
复制链接

扫一扫

专栏目录