IDEA激活码
展开闭合列表
1.标签封装数据
2.定义样式
3.明确事件源和事件
4.明确具体的操作方式，就是事件的处理内容
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
/*为dl下面的dd标签设置样式--包含选择器*/
dl dd{
margin: 0px;
}
dl{
/*编辑器设置的字体大小为20，所以设置20可以显示一行字*/
height: 20px;
/*超出设置高度的部分隐藏掉*/
overflow: hidden;
}
</style>
<script type="text/javascript">
//列表展开闭合方法
var flag = true;
function list(){
/*
1.将dl的overflow的值修改为visiable即可
2.获取dl节点
3.改变节点的style.overflow的属性
*/
//获取dl节点
var dl1 = document.getElementsByTagName("dl")[0];
//改变节点的style.overflow的属性
dl1.style.overflow="visible";
if(flag){
dl1.style.overflow="visible";
flag=false;
}else{
dl1.style.overflow="hidden";
flag=true;
}
}
</script>
</head>
<body>
<dl>
<dt onclick="list();">显示条目一</dt>
<dd>展开列表内容</dd>
<dd>展开列表内容</dd>
<dd>展开列表内容</dd>
<dd>展开列表内容</dd>
</dl>
</body>
</html>
上述代码CSS和JS的耦合性太高，预定义一些样式，便于给标签进行样式的动态加载
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
/*为dl下面的dd标签设置样式--关联选择器*/
dl dd{
margin: 0px;
}
dl{
/*编辑器设置的字体大小为20，所以设置20可以显示一行字*/
height: 20px;
}
/*预定义一些样式，便于给标签进行样式的动态加载*/
.open{
overflow: visible;
}
.close{
overflow: hidden;
}
</style>
<script type="text/javascript">
//重新定义list()方法，降低css和js代码的耦合性
function list(node) {
//获取dl节点
var dl1 = node.parentNode;
//设置dl的className属性值
if(dl1.className=="close"){
dl1.className="open";
}else{
dl1.className="close";
}
}
</script>
</head>
<body>
<dl>
<dt onclick="list(this);">显示条目一</dt>
<dd>展开列表内容1</dd>
<dd>展开列表内容1</dd>
<dd>展开列表内容1</dd>
<dd>展开列表内容1</dd>
</dl>
<dl>
<dt onclick="list(this);">显示条目二</dt>
<dd>展开列表内容2</dd>
<dd>展开列表内容2</dd>
<dd>展开列表内容2</dd>
<dd>展开列表内容2</dd>
</dl>
<dl>
<dt onclick="list(this);">显示条目三</dt>
<dd>展开列表内容3</dd>
<dd>展开列表内容3</dd>
<dd>展开列表内容3</dd>
<dd>展开列表内容3</dd>
</dl>
</body>
</html>
需求：在多个列表下，一次只需要展开一个列表，其他列表都关闭
1.获取所有的dl节点
2.遍历这些节点，只对当前的dl进行展开或者闭合操作，其他节点都进行闭合操作
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
/*为dl下面的dd标签设置样式--关联选择器*/
dl dd{
margin: 0px;
}
dl{
/*编辑器设置的字体大小为20，所以设置20可以显示一行字*/
height: 20px;
}
/*预定义一些样式，便于给标签进行样式的动态加载*/
.open{
overflow: visible;
}
.close{
overflow: hidden;
}
</style>
<script type="text/javascript">
//重新定义list()方法，降低css和js代码的耦合性
function list(node) {
//获取当前的dl节点
var dl1 = node.parentNode;
//获取所有的dl节点
var dls = document.getElementsByTagName("dl");
//遍历dl
for(var i=0;i<dls.length;i++){
//设置dl的className属性值
if(dls[i]==dl1){
if(dl1.className=="close"){
dl1.className="open";
}else{
dl1.className="close";
}
}else{
dls[i].className="close";
}
}
}
</script>
</head>
<body>
<dl>
<dt onclick="list(this);">显示条目一</dt>
<dd>展开列表内容1</dd>
<dd>展开列表内容1</dd>
<dd>展开列表内容1</dd>
<dd>展开列表内容1</dd>
</dl>
<dl>
<dt onclick="list(this);">显示条目二</dt>
<dd>展开列表内容2</dd>
<dd>展开列表内容2</dd>
<dd>展开列表内容2</dd>
<dd>展开列表内容2</dd>
</dl>
<dl>
<dt onclick="list(this);">显示条目三</dt>
<dd>展开列表内容3</dd>
<dd>展开列表内容3</dd>
<dd>展开列表内容3</dd>
<dd>展开列表内容3</dd>
</dl>
</body>
</html>
好友菜单
完成好友菜单，展开闭合效果
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
/*
去除无序列表的样式
将列表的外边距取消
*/
table div{
list-style: none;
margin:0px;
background-color: plum;
display: none;
}
/*对表格框线以及单元格框线进行定义*/
table{
border: cornflowerblue 1px solid;
width: 180px;
}
table td{
border: pink 1px solid;
}
/*单元格中的超链接样式*/
table td a:link,table td a:visited{
color: lightcoral;
text-decoration: none;
}
table td a:hover{
color: blue;
}
/*预定义一些样式*/
.open{
display: block;
}
.close{
display: none;
}
</style>
<script type="text/javascript">
function list(node) {
//先通过事件源超链接标签获取其父节点td,然后通过父节点获取div节点
var td1 = node.parentNode;
//var div1 = td1.childNodes;使用childNodes属性容易出现问题，不要使用
//对于每个容器型节点都有getElementsByTgName()方法
var div1 = td1.getElementsByTagName("div");
for(var i=0;i<div1.length;i++){
//alert(div1[i].nodeName);
if(div1[i].className=="open"){
div1[i].className="close";
}else{
div1[i].className="open";
}
}
}
</script>
</head>
<body>
<table>
<tr>
<td>
<a href="javascript:void(0)" onclick="list(this)">好友菜单</a>
<div>一个好友</div>
<div>一个好友</div>
<div>一个好友</div>
<div>一个好友</div>
</td>
</tr>
</table>
<table>
<tr>
<td>
<a href="javascript:void(0)" onclick="list(this)">好友菜单</a>
<div>一个好友</div>
<div>一个好友</div>
<div>一个好友</div>
<div>一个好友</div>
</td>
</tr>
</table>
<table>
<tr>
<td>
<a href="javascript:void(0)" onclick="list(this)">好友菜单</a>
<div>一个好友</div>
<div>一个好友</div>
<div>一个好友</div>
<div>一个好友</div>
</td>
</tr>
</table>
</body>
</html>
