DOM展开闭合列表：
overflow 属性规定当内容溢出元素框时发生的事情。
auto,hidden,inherit,scroll,visible
1.标签封装数据
2.定义样式，css
3.明确事件源和事件，以及要处理的节点，dom
4.明确具体操作方式(事件的处理内容)，js
<head lang="en">
<meta charset="UTF-8">
<style type="text/css">
dl dd{ /*<dd>标签本来带着缩进功能，取消 */
margin: 0px;
}
dl{
height: 16px;
overflow: hidden;
}
</style>
</head>
<body>
<script type="text/javascript" >
//列表展开闭合
var flag = true;
function list(){
//1.将dl的overflow的属性改为visible
var odlNode = document.getElementsByTagName("dl")[0];//获取dl节点
//odlNode.style.overflow = "visible";这样点一下，展开，但是再也收不回去
if(flag){
odlNode.style.overflow = "visible";
flag = false;
}else{
odlNode.style.overflow = "hidden";
flag = true;
}
}
</script>
<dl>
<dt onclick="list()">菜单如下</dt>
<dd>A菜单</dd>
<dd>B菜单</dd>
<dd>C菜单</dd>
<dd>D菜单</dd>
</dl>
</body>
</html>
但是上面那样写太烂了，应该尽可能的降低耦合性
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
dl dd{ /*<dd>标签本来带着缩进功能，取消 */
margin: 0px;
}
dl{
height: 16px;/*设置高度就是一个字的高度*/
}
/*预定义类选择器，便于给标签进行样式的动态加载*/
.open{
overflow: visible;
}
.close{
overflow: hidden;
}
</style>
</head>
<body>
<script type="text/javascript" >
//重定义list，降低js和css的耦合性
/* function list(){
var odlNode = document.getElementsByTagName("dl")[0];//获取dl节点
//odlNode.className ="open";
if(odlNode.className=="close"){
odlNode.className="open";
}else{
odlNode.className="close";
}
}//这中方式一旦列多了就不好用了*/
function list(node){
//alert(node.nodeName);
var odlNode = node.parentNode;//当前操作的节点对象
if(odlNode.className=="close"){
odlNode.className="open";
}else{
odlNode.className="close";
}
}
</script>
<dl class="close">
<dt onclick="list(this)">一菜单如下</dt>
<dd><a href="http://www.baidu.com">A菜单1</a></dd>
<dd>B菜单1</dd>
<dd>C菜单1</dd>
<dd>D菜单1</dd>
</dl>
<dl class="close">
<dt onclick="list(this)">二菜单如下</dt>
<dd>A菜单2</dd>
<dd>B菜单2</dd>
<dd>C菜单2</dd>
<dd>D菜单2</dd>
</dl>
<dl class="close">
<dt onclick="list(this)">三菜单如下</dt>
<dd>A菜单3</dd>
<dd>B菜单3</dd>
<dd>C菜单3</dd>
<dd>D菜单3</dd>
</dl>
</body>
</html>
//visible展开列表，并没有将余下页面中的内容挤下去，而是重叠在一起
在多个列表下，一次只能展开一个，余下关闭
1.获取所有dl节点，只对当前节点进行展开操作，余下关闭
<html>
<head lang="en">
<meta charset="UTF-8">
<style type="text/css">
dl dd{ /*<dd>标签本来带着缩进功能，取消 */
margin: 0px;
}
dl{
height: 16px;/*设置高度就是一个字的高度*/
}
/*预定义类选择器，便于给标签进行样式的动态加载*/
.open{ overflow: visible; }
.close{ overflow: hidden; }
</style>
</head>
<body>
<script type="text/javascript" >
function list(node){
var ocurrentDlNode = node.parentNode;
var odlNodes = document.getElementsByTagName("dl");
for(var i = 0;i<odlNodes.length;i++){
odlNodes[i]==ocurrentDlNode?
(ocurrentDlNode.className=="close"?ocurrentDlNode.className="open":
ocurrentDlNode.className="close"):(odlNodes[i].className="close");
/* if(odlNodes[i]==ocurrentDlNode){
ocurrentDlNode.className=="close"?ocurrentDlNode.className="open":
ocurrentDlNode.className="close";
}else{
odlNodes[i].className="close";
}*/
}
}
</script>
<dl class="close">
<dt onclick="list(this)">一菜单如下</dt>
<dd><a href="http://www.baidu.com">A菜单1</a></dd>
<dd>B菜单1</dd>
<dd>C菜单1</dd>
<dd>D菜单1</dd>
</dl>
<dl class="close">
<dt onclick="list(this)">二菜单如下</dt>
<dd>A菜单2</dd>
<dd>B菜单2</dd>
<dd>C菜单2</dd>
<dd>D菜单2</dd>
</dl>
<dl class="close">
<dt onclick="list(this)">三菜单如下</dt>
<dd>A菜单3</dd>
<dd>B菜单3</dd>
<dd>C菜单3</dd>
<dd>D菜单3</dd>
</dl>
</body>
</html>
示例 — 好友菜单
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*把表格中的ul进行样式定义
1.去除无序列表的样式
2.取消外边距
*/
table ul {
list-style: none;
margin: 0px;
background-color:#26E356;
display: none;/*是否显示*/
/*border: #FF0000 1px solid;查看不同浏览器是否会有缩进*/
padding:0px;/*设置li内边距*/
}
/*对表格框线进行定义
对单元格的框线进行定义
*/
table{
border: #0000FF 1px solid ;
width: 100px;
}
table td{
border: #0000FF 1px solid ;
background-color: #F0FF0F;
}
table td a:hover{
color: #FF0000;
}
/*单元格中的超链接样式*/
table td a:link,table td a:visited{
color: #0000FF;
text-decoration: none;/*去下划线*/
}
/*预定义一些样式*/
.open{
display: block;
}
.close{
display: none;
}
</style>
</head>
<body>
<!--
完成一个有展开闭合效果的好友菜单
一次只打开一个
-->
<script type="text/javascript">
function list(node){
//因为浏览器解析方式不同，所以尽量拿父节点
var oTdNode = node.parentNode;
var oUlNode = oTdNode.getElementsByTagName("ul")[0];
//alert(oUlNode.nodeName);
var oTabNode = document.getElementById("goodlist");
// alert(oTabNode);
var colloulNodes = oTabNode.getElementsByTagName("ul");
// alert(oulNodes.length);
for(var i = 0;i<colloulNodes.length;i++){
if(colloulNodes[i] == oUlNode){
if(oUlNode.className=="open"){
oUlNode.className="close";
}else{
oUlNode.className="open";
}
}else{
colloulNodes[i].className="close";
}
}
}
</script>
<table id="goodlist">
<tr>
<td>
<a href="javascript:void(0)" onclick="list(this)">好友列表</a>
<ul class="close">
<li>好友1</li>
<li>好友2</li>
<li>好友3</li>
<li>好友4</li>
</ul>
</td>
</tr>
<tr>
<td>
<a href="javascript:void(0)" onclick="list(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)" onclick="list(this)">好友列表</a>
<ul>
<li>好友1</li>
<li>好友2</li>
<li>好友3</li>
<li>好友4</li>
</ul>
</td>
</tr>
</table>
</body>
</html>
时间： 2024-11-10 01:20:55