A股上市公司传智教育（股票代码 003032）旗下技术交流社区北京昌平校区

传智教育官网黑马程序员官网

 找回密码
 加入黑马

QQ登录

只需一步，快速开始

论坛首页 › 隐藏归类 › 黑马那些年 › 第32,33,34,35届Android交流区 › 正文

html展开闭合效果的问题

© 疯狂沙漠 中级黑马   /  2014-4-17 00:10  /  1634 人查看  /  5 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4.   <title> New Document </title>
  5.    <script type="text/javascript">
  6.    
  7.         function change()
  8.         {
  9.            var dlNode = event.srcElement;
  10.            var parentNode = dlNode.parentNode;

  12.            var otherNode = document.getElementsByTagName("dl");
  13.                 for(var i=0;i< otherNode.length;i++)
  14.                 {
  15.                     if(otherNode[i]== parentNode)
  16.                         {
  17.                          if(parentNode.className =="open")
  18.                            {             
  19.                                   parentNode.className = "close";
  20.                            }else
  21.                            {
  22.                                    parentNode.className = "open";
  23.                            }
  24.                         }else
  25.                                  otherNode[i].className = "close";
  26.                 }
  27.           
  28.         }
  29.   
  30.    </script>

  32. <style type="text/css">
  33. dl{
  34.     overflow:hidden;
  35.         height:16px;
  36. }

  38. dt{
  39.     cursor:hand;
  40. }

  42. .open{
  43.     overflow:visible;
  44. }

  46. .close{
  47.     overflow:hidden;       
  48. }


  51. </style>
  52. </head>
  53. <body>
  54.   <dl>
  55.     <dt onclick ="change()">船舶管理</dt>
  56.                 <dd>主演：王额外</dd>
  57.                 <dd>主演：江苏大丰</dd>
  58.                 <dd>导演：斯蒂芬</dd>
  59. </dl>
  60. <dl>
  61.          <dt onclick ="change()">同行要素</dt>
  62.                 <dd>主演：王额外</dd>
  63.                 <dd>主演：江苏大丰</dd>
  64.                 <dd>导演：斯蒂芬</dd>
  65.   </dl>
  66.   <dl>
  67.          <dt onclick ="change()">权限设置</dt>
  68.                 <dd>主演：王额外</dd>
  69.                 <dd>主演：江苏大丰</dd>
  70.                 <dd>导演：斯蒂芬</dd>
  71.   </dl>
  72. </body>
  73. </html>
复制代码
代码中运行后有2个问题：
1、每点击一个项，展开的时候并没有向下拉伸，而是覆盖的，如图:

2、鼠标放在项上，并没有变为手势

评分

参与人数 1技术分 +1 收起 理由
zzkang0206 + 1

查看全部评分

5 个回复

倒序浏览
ノtrack 中级黑马 2014-4-17 08:09:10
| 只看该作者
沙发
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. <head>
  5.   <title> New Document </title>
  6.    <script type="text/javascript">
  7.    
  8.         function change()
  9.         {
  10.            var dlNode = event.srcElement;
  11.            var parentNode = dlNode.parentNode;

  13.            var otherNode = document.getElementsByTagName("dl");
  14.                 for(var i=0;i< otherNode.length;i++)
  15.                 {
  16.                     if(otherNode[i]== parentNode)
  17.                         {
  18.                          if(parentNode.className =="open")
  19.                            {              
  20.                                   parentNode.className = "close";
  21.                            }else
  22.                            {
  23.                                    parentNode.className = "open";
  24.                            }
  25.                         }else
  26.                                  otherNode[i].className = "close";
  27.                 }
  28.          
  29.         }
  30.   
  31.    </script>

  33. <style type="text/css">
  34. dl{
  35.                 /*设置手势 */
  36.                 cursor:pointer;
  37.         height:80px;
  38. }

  40. dt{
  41.         /*每次显示导航条*/
  42.         overflow:hidden;
  43.         height:20px;

  45. }

  47. .open{
  48.                 /*高度展开*/
  49.                 height:80px;
  50. }

  52. .close{  
  53.                 /*恢复就好了*/
  54.                 height:20px;  
  55.           overflow:hidden;
  56. }


  59. </style>
  60. </head>
  61. <body>
  62.   <dl>
  63.     <dt onclick ="change()">船舶管理</dt>
  64.                 <dd>主演：王额外</dd>
  65.                 <dd>主演：江苏大丰</dd>
  66.                 <dd>导演：斯蒂芬</dd>
  67. </dl>
  68. <dl>
  69.          <dt onclick ="change()">同行要素</dt>
  70.                 <dd>主演：王额外</dd>
  71.                 <dd>主演：江苏大丰</dd>
  72.                 <dd>导演：斯蒂芬</dd>
  73.   </dl>
  74.   <dl>
  75.          <dt onclick ="change()">权限设置</dt>
  76.                 <dd>主演：王额外</dd>
  77.                 <dd>主演：江苏大丰</dd>
  78.                 <dd>导演：斯蒂芬</dd>
  79.   </dl>
  80. </body>
  81. </html>
复制代码



有点很抱歉,由于时间关系.  一开始全是展开的我就没有修改了  我得捉紧学习了   你代码修改判断一下就好了

评分

参与人数 1技术分 +1 收起 理由
zzkang0206 + 1

查看全部评分

回复 使用道具 举报
疯狂沙漠 中级黑马 2014-4-17 12:25:22
| 只看该作者
藤椅
ノtrack 发表于 2014-4-17 08:09
有点很抱歉,由于时间关系.  一开始全是展开的我就没有修改了  我得捉紧学习了   你代码修改判断一下就好 ...

对于第一个问题，如果每项的内容增加，还是会覆盖，所以没有解决。
其实这段代码在毕向东javascript视频中第16集节点操作02有，但不知为何运行效果和视频中的不一样。不过还是要谢谢你
回复 使用道具 举报
ノtrack 中级黑马 2014-4-17 14:58:16
| 只看该作者
板凳
疯狂沙漠 发表于 2014-4-17 12:25
对于第一个问题，如果每项的内容增加，还是会覆盖，所以没有解决。
其实这段代码在毕向东javascript视频 ...

调下高度就好了
回复 使用道具 举报
疯狂沙漠 中级黑马 2014-4-17 15:18:18
| 只看该作者
报纸
ノtrack 发表于 2014-4-17 14:58
调下高度就好了

这个太被动了，若是子项是动态的，设置长度也没用。我现在不解的是：毕老师的视频中并没有设置展开高度，照样可以满足需求
回复 使用道具 举报
ノtrack 中级黑马 2014-4-17 20:06:54
| 只看该作者
地板
疯狂沙漠 发表于 2014-4-17 15:18
这个太被动了，若是子项是动态的，设置长度也没用。我现在不解的是：毕老师的视频中并没有设置展开高度， ...

那个貌似是display吧 我也忘了  你好好看视频吧 我只有效果  
回复 使用道具 举报
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 加入黑马