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

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

 找回密码
 加入黑马

QQ登录

只需一步，快速开始

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

关于js上下层目录的问题

© 沫然 中级黑马   /  2014-3-28 23:44  /  1199 人查看  /  2 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

本帖最后由 沫然 于 2014-3-29 11:18 编辑
  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. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>无标题文档</title>
  6. <script type="text/javascript">
  7. function list()
  8. {
  9.         var dtNode = event.srcElement;
  10.         
  11.         var dlNode = dtNode.parentNode;
  12.         
  13.         if(dlNode.className=="open")
  14.         {
  15.                 dlNode.className = "close";
  16.         }
  17.         else
  18.         {
  19.                 dlNode.className = "open";
  20.         }
  21.         
  22. }

  24. </script>
  25. <style type="text/css">
  26. .open{
  27.         overflow:visible;
  28.         }
  29. .close{
  30.         overflow:hidden;
  31.         }
  32. dl{
  33.         overflow:hidden;
  34.         height:16px;
  35.         }
  36. </style>

  38. </head>

  40. <body>
  41. <dl>
  42.         <dt onclick="list()">上层项目上层项目</dt>
  43.     <dd>噶发的范德萨发给</dd>
  44.     <dd>噶发的范德萨发给</dd>
  45.     <dd>噶发的范德萨发给</dd>
  46.     <dd>噶发的范德萨发给</dd>
  47.     <dd>噶发的范德萨发给</dd>
  48. </dl>
  49. <dl>
  50.         <dt>上层项目上层项目</dt>
  51.     <dd>噶发的范德萨发给</dd>
  52.     <dd>噶发的范德萨发给</dd>
  53.     <dd>噶发的范德萨发给</dd>
  54.     <dd>噶发的范德萨发给</dd>
  55.     <dd>噶发的范德萨发给</dd>
  56. </dl>



  60. </body>
  61. </html>
复制代码
这是未点击前的图片：




这是点击后的效果：



请问是哪里出问题了？



评分

参与人数 1技术分 +1 收起 理由
枫儿 + 1 赞一个!

查看全部评分

2 个回复

倒序浏览
凌慕枫 中级黑马 2014-3-29 09:26:43
| 只看该作者
沙发
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

  3. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml">
  5. <head>
  6. <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
  7. <title>无标题文档</title>
  8. <script type="text/javascript">
  9. function list()
  10. {
  11.         var u1 = document.getElementById("u1");
  12.        
  13.         if(u1.style.display=="block"){
  14.                 //触动的ul如果处于显示状态，则隐藏
  15.                 u1.style.display = "none";
  16.         }else{
  17.                 u1.style.display="block"
  18.         }
  19. }
  20. function list1()
  21. {
  22.         var u2 = document.getElementById("u2");
  23.         if(u2.style.display=="block"){
  24.                 //触动的ul如果处于显示状态，则隐藏
  25.                 u2.style.display = "none";
  26.         }else{
  27.                 u2.style.display="block"
  28.         }


  31. }
  32. </script>
  33. <style type="text/css">
  34. .u{
  35.         list-style-type:none;        /*设置列表项标志的类型为无*/
  36.         display:none;                /*隐藏当前的列表项*/
  37. }
  38. </style>

  40. </head>
  41.        
  42. <body>

  44.         <dl>
  45.                 <dt onclick="list()">上层项目</dt>
  46.                 <ul id="u1" class="u">
  47.                         <li>1.java</li>
  48.                         <li>2.Android</li>
  49.                         <li>3.云计算</li>
  50.                         <li>4.ASP.NET</li>
  51.                         <li>5.ios</li>
  52.                 </ul>
  53.         </dl>

  55.         <dl>
  56.                 <dt onclick="list1()">上层项目</dt>
  57.                 <ul id="u2" class="u">
  58.                         <li>1.java</li>
  59.                         <li>2.Android</li>
  60.                         <li>3.云计算</li>
  61.                         <li>4.ASP.NET</li>
  62.                         <li>5.ios</li>
  63.                 </ul>
  64.         </dl>



  68. </body>
  69. </html>
复制代码


好吧，我承认我这个跟你那个不一样，参考一下就好……

评分

参与人数 1技术分 +1 收起 理由
枫儿 + 1 赞一个!

查看全部评分

回复 使用道具 举报
沫然 中级黑马 2014-3-29 11:18:26
| 只看该作者
藤椅
凌慕枫 发表于 2014-3-29 09:26
好吧，我承认我这个跟你那个不一样，参考一下就好……

受教了
回复 使用道具 举报
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 加入黑马