实例演示（列表一个开其余的关）

最新推荐文章于 2021-03-15 17:57:38 发布
最新推荐文章于 2021-03-15 17:57:38 发布
阅读量1.2k 收藏
点赞数
分类专栏： JavaScript实例 javascript Java学习之路 文章标签： JavaScript 列表菜单
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yangxin_blog/article/details/49129579
版权

之前写过这个http://blog.csdn.net/yangxin_blog/article/details/49105867菜单的体现，但是在写了之后就发现了，不太适合，高度要精准控制，并且还不是很好看。现在采用table来封装，我们知道table的每一行写满了之后，下一行会自动加，这个比之前我们自己制定高度好很多。

1，点击之后都可以并存的情况（只需函数写法不一样就可）

dispaly也是自己设置的，通过父节点来操作子节点，显示与否；

/* function open1(node){
		 
		 	//通过父节点来操作兄弟节点
			
			当点击之后出现之后，直接就能打开但是要求在点开一个时候，其余的都关掉

				var nodes = node.parentNode;
				var nn = nodes.getElementsByTagName("ul")[0];
				with (nn.style) {
					display = (display == "block") ? "none" : "block";
				}
			}*/
			</script>

2，点击之后只允许打开一个，其余的都要关掉

<script type="text/javascript">
				function list1(node){
				//这是要对全部操作，必须要得到所有的对象 （根据table 的id 来获得）
				//根据this判断，不是属于this，那么就关闭
				//alert("aa");
				//1，获得点击对象的值
				var nodes = node.parentNode;//传入当前的父节点
				var nn = nodes.getElementsByTagName("ul")[0];//得到当前的对象，要是遍历所有，与这个对象一样，就设置相反的情况，其余的全部关闭
				//2，获得全部对象
				var mm = document.getElementById("menuid");
				var names = mm.getElementsByTagName("ul");
				
				//3，开始一一配对
				for (var x = 0; x < names.length; x++) {
					/*这样写，可以简化，利用下面的方法
					 if (names[x] == nn) {
						if (nn.className == "open2") {
							nn.className = "close2";
						}
						else {
							nn.className = "open2";
						}
					}else {
						nn.className = "close2";
					}*/
					if(names[x]==nn&&names[x].className!="open2"){
							nn.className="open2";
					}else{
							names[x].className="close2";
					}
				}
			}
	</script>
css样式的编写： 

<style type="text/css">
		ul{
			list-style:none;
			margin:0px;
			padding:0px;
		}
		table{
			border:#00ff40  solid 1px;
		}
		table  a{
			text-decoration:none;
		}
		table tr td ul{
			display:none;
		}
		.open2{
			display:block;
			background:#8080ff;
		}
		.close2{
			display:none;
		}
效果图（只能开一个的）：


完整代码：

<!DOCTYPE html>
<html>
  <head>
    <title>qqMenu.html</title>
	<style type="text/css">
		ul{
			list-style:none;
			margin:0px;
			padding:0px;
		}
		table{
			border:#00ff40  solid 1px;
		}
		table  a{
			text-decoration:none;
		}
		table tr td ul{
			display:none;
		}
		.open2{
			display:block;
			background:#8080ff;
		}
		.close2{
			display:none;
		}
	</style>
	<script type="text/javascript">
		/* function open1(node){
		 
		 	//通过父节点来操作兄弟节点
			
			当点击之后出现之后，直接就能打开但是要求在点开一个时候，其余的都关掉

				var nodes = node.parentNode;
				var nn = nodes.getElementsByTagName("ul")[0];
				with (nn.style) {
					display = (display == "block") ? "none" : "block";
				}
			}*/
			</script>
			<script type="text/javascript">
				function list1(node){
				//这是要对全部操作，必须要得到所有的对象 （根据table 的id 来获得）
				//根据this判断，不是属于this，那么就关闭
				//alert("aa");
				//1，获得点击对象的值
				var nodes = node.parentNode;//传入当前的父节点
				var nn = nodes.getElementsByTagName("ul")[0];//得到当前的对象，要是遍历所有，与这个对象一样，就设置相反的情况，其余的全部关闭
				//2，获得全部对象
				var mm = document.getElementById("menuid");
				var names = mm.getElementsByTagName("ul");
				
				//3，开始一一配对
				for (var x = 0; x < names.length; x++) {
					/*这样写，可以简化，利用下面的方法
					 if (names[x] == nn) {
						if (nn.className == "open2") {
							nn.className = "close2";
						}
						else {
							nn.className = "open2";
						}
					}else {
						nn.className = "close2";
					}*/
					if(names[x]==nn&&names[x].className!="open2"){
							nn.className="open2";
					}else{
							names[x].className="close2";
					}
				}
			}
	</script>
	
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
  </head>
  
  <body >
   <table id="menuid">
   		<tr>
   			<td>
   				<!--<a href="javascript:void(0)" οnclick="open1(this)">同事栏</a>-->
   				<a href="javascript:void(0)" οnclick="list1(this)">同事栏</a>
   				<ul >
   					<li>同事1</li>
   					<li>同事2</li>
   					<li>同事3</li>
   					<li>同事4</li>
   				</ul>
				
   			</td>
   		</tr>
   		<tr>
   			<td>
   				<!--<a href="javascript:void(0)" οnclick="open1(this)">同学栏</a>-->
   				<a href="javascript:void(0)" οnclick="list1(this)">同学栏</a>
   				<ul>
   					<li>同学1</li>
   					<li>同学2</li>
   					<li>同学3</li>
   					<li>同学4</li>
   				</ul>
   			</td>
   		</tr>
   		<tr>
   			<td>
   				<!--<a href="javascript:void(0)" οnclick="open1(this)">黑名单栏</a>-->
   				<a href="javascript:void(0)" οnclick="list1(this)">黑名单栏</a>
   				<ul>
   					<li>黑名单同学1</li>
   					<li>黑名单同学2</li>
   					<li>黑名单同学3</li>
   					<li>黑名单同学4</li>
   				</ul>
   			</td>
   		</tr>
	
   </table>
  </body>
</html>


learning_code_blog
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
点击页面关闭某个打开的列表
Dear_Mr的博客
12-06 605
问题描述当点击“添加按钮”的时候，会显示一个列表，当再次点击“添加按钮”,这个列表就会关闭，这样做的话，交互性并不是那么良好，所以就需要修改一下啦……思路及解决办法增加的交互就是，在用户点击该页面的其他地方的时候，关闭这个列表，下面就是这个的具体实现 梳理下用的东西： 1. ref 来获取元素，可以参考这里 2. watch来监测showGoodsList变量的变化 3. 事件的添加方式，这
软件模式设计作业
shuangzitianyu的博客
09-02 2525
1.一个开宝箱游戏的基本描述为:游戏中有多种类型的人物(Role)，如战士(Solider)、魔法师(Mage)等，主角的类型只能选择其中一种，且游戏中不再更改。游戏中还有各种宝箱(Box)，如装有不同数目金钱的宝箱、装有毒物的宝箱等。当任一种类型的主角打开装有金钱的宝箱时，宝箱中的金钱会增加给主角，同时宝箱的金钱数目变成0；当战士打开装有毒物的宝箱时，战士的生命值(HP)会减少10%，但金钱(M
vue中 列表 里面的某一个打开，其他都关闭
weixin_44727080的博客
03-15 649
//index是一级的下标，n是二级属性的下标 showaAnswerName(index,n) { this.uploadDiv = false; this.$nextTick(()=>{ this.pageRecode[index].propertyList[n].showanswer = !this.pageRecode[index].propertyList[n].showanswer //根据当前的下标找到他是第几个，然后改..
设计模式作业1
xxiaoEmma的博客
09-18 1479
1.一个开宝箱游戏的基本描述为:游戏中有多种类型的人物(Role)，如战士(Solider)、魔法师(Mage)等，主角的类型只能选择其中一种，且游戏中不再更改。游戏中还有各种宝箱(Box)，如装有不同数目金钱的宝箱、装有毒物的宝箱等。当任一种类型的主角打开装有金钱的宝箱时，宝箱中的金钱会增加给主角，同时宝箱的金钱数目变成0；当战士打开装有毒物的宝箱时，战士的生命值(HP)会减少10%，但金钱(M...
设计模式-开宝箱
小帅的博客
10-24 1007
一个开宝箱游戏的基本描述为:游戏中有多种类型的人物(Role)，如战士(Solider)、魔法师(Mage)等，主角的类型只能选择其中一种，且游戏中不再更改。游戏中还有各种宝箱(Box)，如装有不同数目金钱的宝箱、装有毒物的宝箱等。当任一种类型的主角打开装有金钱的宝箱时，宝箱中的金钱会增加给主角，同时宝箱的金钱数目变成0；当战士打开装有毒物的宝箱时，战士的生命值(HP)会减少10%，但金钱(Mon...
2016-2017第2学期《设计模式》期末考试A卷及参考答案
07-07
这是2016-2017学年第2学期计算机科学与技术专业《设计模式》期末考试A卷的试卷与参考答案，供同学们考完后核对答案。
一个可拖拽列宽表格实例演示
09-05
本文将详细介绍一个可拖拽列宽表格实例,需要了解更多的朋友可以参考下
灰色关联分析计算的实例演示
10-24
灰色关联分析计算的实例演示 快速学习灰关联计算套路
Protues仿真实例-51单片机-SPI演示文件两个595对接.rar
04-28
Protues仿真实例-51单片机-SPI演示文件两个595对接.rar
神经网络模型实例演示视频教程.wmv
02-06
神经网络模型实例演示视频教程，希望能够学习者提供帮助，实现对神经网络模型实例知识的掌握与理解，为后续学习做好铺垫，实现神经网络模型实例的灵活运用
jquery会员注册表单验证实例演示.zip
07-11
jquery会员注册表单验证实例演示
C#设计模式作业1、3.rar
06-20
C#设计模式作业，关于几个重要的使用频繁的设计模式展开作业训练，也方便期末预习~设计模式的相关知识，学习过后可以牢记这几种设计模式
设计模式题库
06-24
此文档是设计模式试题题库，复习考试好帮手
设计模式课程设计
09-11
这是我自己写的一个设计模式的课程设计，拿出来和大家分享一下吧，这是一个用Java语言编写的绘图工具，里面用到了单例模式，桥接模式，建造者模式，命令模式，策略模式以及装饰模式，实现的功能有对三角形矩形圆形的绘制，装饰，大小的改变和调整，主要是学习各种模式的使用。
软件设计模式
05-13
提供了现在软件设计中的一些普遍方法
设计模式－Christopher Alexander说：
GGP_DWS_DANG的网络日记专栏
12-19 1818
     以一种松散的方式把一些模式串连在一起来建造建筑是可能的。这样的建筑仅仅是一些模式的堆砌，而不紧凑。这不够深刻。然而另有一种组合模式的方式，许多模式重叠在同一个物理空间里：这样的建筑非常紧凑，在一小块空间里集成了许多内涵；由于这种紧凑，它变得深刻。
HTML中下拉框的简单介绍＜Select＞＜option＞
热门推荐
yangxin_blog的专栏
10-23 11万+
下拉框在生活中应用很广
JavaScript动态创建table表格
yangxin_blog的专栏
10-13 3万+
自动创建表格，主要是利用table对象的insertRow(),和insertCell()等技术
html中的简单实例演示（checkbox）的使用
yangxin_blog的专栏
10-15 3万+
演示一个小小的例子：在购物车里面，我们能够勾选自己所选的商品，然后能够显示出相应的价格。 1，首先显示出相应的界面： 相关代码： 商品列表： 笔记本电脑3000   台式机 2900   路由器 90 家常用品500   洗衣机 5600 全选 注意：在checkbox中，要是属于同一组的，在复选框的属性内name="
举一个代码的实例 演示一遍
最新发布
03-11
好的，以下是一个简单的 C 语言代码实例： #include int main() { printf("Hello, World!"); return 0; } 这个程序会输出 "Hello, World!"，是一个经典的 C 语言入门示例。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值