DOM13---展开闭合列表03

最新推荐文章于 2019-08-31 15:01:11 发布
最新推荐文章于 2019-08-31 15:01:11 发布
阅读量849 收藏
点赞数
分类专栏： DOM 文章标签： DOM 展开闭合列表03
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zheng0518/article/details/8998246
版权

只展开当前节点，关闭其它节点


<html>
	<head>
		<title></title>
		<style type="text/css">
			/*把dd中的缩近取消为0*/
			dl dd{
				margin:0px;
			}
			dl{
				height:16px;
			}
			/*预定义一些样式，类选择器，便于动态加载*/
			.open{
				overflow:visible;
			}
			.close{
				overflow:hidden;
			}
			dl dt{
				color:#ff8000;
			}
		</style>
	</head>
	<body>
		<script type="text/javascript">
			//一次只展开一个列表，其它列表都关闭
			function list(node)
			{
				 //1、获取当前的dl节点
				 var olistDt = node.parentNode; 
				 //2、获取所有的dl节点
				 var collListDts = document.getElementsByTagName("dl");
				 //3、遍历所有dl,如果是当前节点，则打开或关闭，如果不是当前节点，则关闭
				 for(var i=0;i<collListDts.length;i++)
				 {
					if(collListDts[i]==olistDt)
					{
						if(olistDt.className=="close")
						{
							olistDt.className = "open";
						}else
						{
							olistDt.className = "close";
						}
					}else
					{
						collListDts[i].className = "close";
					}
				 }
				 
			}
		</script>
		<dl class="close">
			<dt id="listDt" οnclick="list(this)">显示条目一</dt>
			<dd>展开列表内容1</dd>
			<dd>展开列表内容1</dd>
			<dd>展开列表内容1</dd>
			<dd>展开列表内容1</dd>
		</dl>
		<dl class="close">
			<dt id="listDt" οnclick="list(this)">显示条目二</dt>
			<dd>展开列表内容2</dd>
			<dd>展开列表内容2</dd>
			<dd>展开列表内容2</dd>
			<dd>展开列表内容2</dd>
		</dl>
		<dl class="close">
			<dt id="listDt" οnclick="list(this)">显示条目三</dt>
			<dd>展开列表内容3</dd>
			<dd>展开列表内容3</dd>
			<dd>展开列表内容3</dd>
			<dd>展开列表内容3</dd>
		</dl>
	</body>
</html>


onyas
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaSE-DOM视频讲解
07-22
资源名称：JavaSE-DOM视频讲解资源目录：【】01-DOM(概述)【】01-DOM(示例-新闻字体)【】01-DOM(示例-邮件列表)【】02-DOM...03-DOM(示例-展开闭合列表)【 资源太大，传百度网盘了，链接在附件中，有需要的同学自取。
Javascript通过overflow控制列表闭合与展开的方法
12-03
在本文中，我们将探讨如何使用JavaScript结合CSS的`overflow`属性来控制列表的闭合与展开，以实现一个交互式的用户界面。 首先，我们要理解`overflow`属性在CSS中的作用。`overflow`用于规定当内容溢出一个块级元素...
DOM（二）-05-(示例-展开闭合列表3)
wy_0928的博客
08-20 369
<!-- 新需求：在多个列表下，一次只能展开一个，当展开另一个时候，前一个被自动关闭 （如先展开列表一，立马点开列表二，此时列表一被自动关闭） --> <!-- 思路： 1.获取所有dl节点 2.遍历这些节点，只对当前的dl进行展开或闭合操作，其他节点都进行闭合操作。 --> dl dd{ margin:0px; } dl{ height:16px;
DOM11---展开闭合列表01
奋斗、
05-31 991
只有一个展开列表的情况 /*把dd中的缩近取消为0*/ dl dd{ margin:0px; } dl{ height:16px; overflow:hidden; } <!-- 思路： 1、标签封装数据，html 2、定义样式css 3、明确事件源，事件，以及要处
【DOM】展开闭合列表示例
你今天真好看呀
08-31 339
1.标签封装数据 2.定义样式 3.明确事件源和事件 4.明确具体的操作方式，就是事件的处理内容 <html> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> /*为dl下面的dd标签设置...
Javascript 通过overflow控制列表闭合展开
limlimlim的专栏
01-25 1521
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml">     通过overflow控制列表闭合展开             div dl         {             margin:0;             padding:0;
（7）展开闭合列表：布局overflow在列表中应用
FixedStar 的博客
08-06 360
.open {
js展开闭合效果演示代码
12-01
这段代码是用于实现JavaScript的展开和闭合效果的示例，常见于网页中的折叠菜单或者隐藏显示的内容。在这个例子中，代码使用了HTML、CSS和JavaScript三者结合的方式来完成这一功能。 首先，我们看HTML部分，它包含...
olyata-main-probably
03-31
1. HTML标签：HTML标签分为开启标签（如`<p>`）和闭合标签（如`</p>`），它们告诉浏览器如何解析和显示内容。例如，`<p>`用于创建段落，`<a>`用于创建超链接，`<img>`用于插入图像等。 2. HTML属性：标签可以有属性...
IT-INCUBATOR
04-01
7. **列表`: `<ul>`（无序列表）和`<ol>`（有序列表）标签用于创建列表，`<li>`（列表项）标签用于定义列表中的每一项。 8. **表格**: `<table>`元素用于创建表格，`<tr>`定义行，`<td>`定义单元格，`<th>`定义表头...
javascript使用DOM模型和CSS实现菜单的折叠和展开
projl的专栏
04-09 1240
DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">html>head>title> New Document title>style type="text/css">dl            {    background-color:#000;color:#fff;width:100px;}dt            {  
DOM（一）——HTML DOM
热门推荐
学会改变自己——才能突破
11-27 2万+
对于B/S开发，客户端与服务器端的交互是非常必要的，JavaScript的提出解决了很多问题，AJAX的提出也解决了异步通信的问题，更加为用户着想了。而DOM是其中非常基础的知识，在学习AJAX的同时，我学习了一下DOM的相关操作，这篇重点讲一下HTML DOM的相关内容，其实就是在HTML网页上进行的各种操作。           一，概述： DOM（对象文档模型（Docume
DOM（二）-03-DOM(示例-展开闭合列表)
wy_0928的博客
08-20 387
<!-- DOM示例-展开闭合列表 这个也是网页中常用的功能演示，其中需要用到CSS技术、DOM技术等 希望实际效果是，单击“显示条目一”就能出现下拉菜单 --> <!-- 思路： 1.标签封装数据，用html 2.定义样式，用css 3.明确事件源，事件，以及要处理的节点，用dom 4.明确具体操作方式，其实就是事件的处理内容 --> dl dd{/*关联选
DOM07---通过节点的层次关系获取节点对象
奋斗、
05-30 2676
<!-- 通过节点的层次关系获取节点对象 关系： 1、父节点：parentNode属性 2、子节点：childNodes集合，获得全部子节点 3、兄弟节点： 上一个兄弟节点：previousSibling 下一个兄弟节点: nextSibling --> function getNodeByLevel() { var tabNode
DOM23---Js级联菜单实现城市的选择
奋斗、
06-11 2066
如图所示： 代码如下： select { width:100px; } function selectCity() { var collCities=[['选择城市'] ,['海淀区','朝阳区','东城区','西城区'] ,['济南','
DOM12---展开闭合列表02
奋斗、
05-31 1925
多个列表进行展开闭合，并且js,与css分离 /*把dd中的缩近取消为0*/ dl dd{ margin:0px; } dl{ height:16px; } /*预定义一些样式，类选择器，便于动态加载*/ .open{ overflow:visible; } .close{ ove
DOM01---概述
奋斗、
05-20 1330
DOM:Document Object Model(文档对象模型) 用来将标记型文档封装成对象，并将标记型文档中的所有的内容(标签，文本，属必等)都封装成对象。 封装成对象的目的是为了更方便的操作这些文档以及当档中的所有内容 因为对象的出现就可以有属性和行为被调用。 文档对象模型 文档：标记型文档(html,xml) 对象：封装了属性和行为的实例，可以被直接调用。 模
dom-to-image使用方法
最新发布
12-28
dom-to-image是一个用于将DOM元素转换为图像的JavaScript库。以下是dom-to-image的使用方法示例： 1. 首先，确保已经安装了dom-to-image库。可以使用npm进行安装： ```shell npm install dom-to-image ``` 2. 在...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值