JavaScript中list的简单使用<菜单>

最新推荐文章于 2025-06-03 09:11:50 发布

learning_code_blog

最新推荐文章于 2025-06-03 09:11:50 发布

阅读量5.6k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： JavaScript实例 javascript Java学习之路文章标签： HTML JavaScript

本文链接：https://blog.youkuaiyun.com/yangxin_blog/article/details/49105867

Java学习之路同时被 3 个专栏收录

47 篇文章

订阅专栏

JavaScript实例

14 篇文章

订阅专栏

javascript

14 篇文章

订阅专栏

本文介绍如何使用CSS和JavaScript实现一个简单的下拉菜单效果。通过改变元素的overflow属性来控制子菜单的显示与隐藏，并利用高度变化来达到平滑的展开与收起效果。

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

很简单的一个使用：点击菜单，能够显示下面的或者不显示

1，主要目的：：展现的是的一个菜单项，然后点击一下，隐藏，点一下，弹出下面的内容
用到的是 overflow：hidden 和 overflow="visible"这两个属性在点击的function中，设置属性应该
node.style.overflow="visible";当然设置tr的高度也是很重要的，要恰好让其他的选项隐蔽
2，采用同样的技术，多加几个，但是就是传参数比较麻烦，采用this传参很常用

<!DOCTYPE html>
<html>
  <head>
	<!-- 1，主要目的：： 展现的是的一个菜单项，然后点击一下，隐藏，点一下，弹出下面的内容
	用到的是 overflow：hidden    和  overflow="visible"这两个属性 在点击的function中，设置属性应该
	node.style.overflow="visible";
		2，采用同样的技术，多加几个，但是就是传参数比较麻烦
		
	-->
    <title>list.html</title>
	
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
	<style type="text/css">
			dl{
				height:18px;/*优先级问题，必须要写*/
				overflow:hidden;
			}
			dd{
				margin:0px;
				padding:0px;
			}
			.close{
				height:18px;/*优先级问题，必须要写*/
				overflow:hidden;
			}
			.open{
				height:80px;
				overflow:visible;
				background-color:#ff8000;
				}
			
	</style>
		<script type="text/javascript">
	
					function click2(node1){
//						alert("aa"+node.nodeName);// td
						var nodes=node1.parentNode;
//						alert(nodes.nodeName);
					//	alert("aa"+nodes.className);
						//※※通过传进的对象 判断采用哪种css模式
						if(nodes.className=="open"){
							nodes.className="close";
						}else{
							nodes.className="open";
						}
					}
		</script>
		
		
  </head>
  <body>
  	<!--层次列表-->
	<!--当很多时候采用传参就很麻烦,每个都需要去传参
  	<dl>
  		<dt onclick="click1(0)">菜单条1</dt>
		<dd>菜单1</dd>
		<dd>菜单2</dd>
		<dd>菜单3</dd>
		<dd>菜单4</dd>
  	</dl>
  	<dl>
  		<dt onclick="click1(1)">菜单条2</dt>
		<dd>菜单11</dd>
		<dd>菜单22</dd>
		<dd>菜单33</dd>
		<dd>菜单44</dd>
  	</dl>
  	<dl>
  		<dt onclick="click1(2)">菜单条3</dt>
		<dd>菜单12</dd>
		<dd>菜单23</dd>
		<dd>菜单34</dd>
		<dd>菜单45</dd>
  	</dl>
	-->

	<br/>
	<br/>
	<hr/>
	
	
	<!--<dl class="close">先手动采用css测试，可以然后采用编程使用-->
	<dl>
  		<dt onclick="click2(this)">1菜单条1</dt>
		<dd>菜单1</dd>
		<dd>菜单2</dd>
		<dd>菜单3</dd>
		<dd>菜单4</dd>
  	</dl>
  	<dl>
  		<dt onclick="click2(this)">2菜单条2</dt>
		<dd>菜单11</dd>
		<dd>菜单22</dd>
		<dd>菜单33</dd>
		<dd>菜单44</dd>
  	</dl>
  	<dl>
  		<dt onclick="click2(this)">3菜单条3</dt>
		<dd>菜单12</dd>
		<dd>菜单23</dd>
		<dd>菜单34</dd>
		<dd>菜单45</dd>
  	</dl>
  </body>
</html>

点击前：

点击后：颜色设置是css设置的