本帖最后由 刘张朋 于 2013-7-14 22:33 编辑
如下面的代码,我的运行结果跟毕老师视频上不一样,不知是不是浏览器的问题,还有就是我的这个点浏览器的时候演示一在ie和火狐上都不能展开,但是在搜狗上却可以,搞不懂啊。。。。。
我的运行结果 老师运行结果
- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <title>Insert title here</title>
- <script type="text/javascript">
- function openClose(){
- var node = event.srcElement;
- var dlNode = node.parentNode;
- var divNode = document.getElementById("divId");
- var dlNodes = divNode.getElementsByTagName("dl");
- for(var x=0;x<dlNodes.length;x++){
- if(dlNodes[x]==dlNode){
- if(dlNode.className=="open")
- dlNode.className = "close";
- else
- dlNode.className = "open";
- }
- else
- dlNodes[x].className = "close";
- }
- }
- </script>
- <style type="text/css">
- .open{
- overflow:visible;
- }
- .close{
- overflow:hidden;
- }
- dl{
- height:16px;
- overflow:hidden;
- }
- </style>
- </head>
- <body>
- <div id="divId">
- <dl>
- <dt onclick="openClose()">演示一</dt>
- <dd>冰川时代刚</dd>
- <dd>冰川时代刚</dd>
- <dd>冰川时代刚</dd>
- <dd>冰川时代刚</dd>
- </dl>
- <dl>
- <dt onclick="openClose()">演示二</dt>
- <dd>冰川时代刚</dd>
- <dd>冰川时代刚</dd>
- <dd>冰川时代刚</dd>
- <dd>冰川时代刚</dd>
- </dl>
- <dl>
- <dt onclick="openClose()">演示三</dt>
- <dd>冰川时代刚</dd>
- <dd>冰川时代刚</dd>
- <dd>冰川时代刚</dd>
- <dd>冰川时代刚</dd>
- </dl>
- </div>
- </body>
- </html>
复制代码 |
|