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

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© 沫然 中级黑马   /  2014-3-28 23:44  /  1213 人查看  /  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. }

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

  36. </head>

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



  54. </body>
  55. </html>
复制代码
这是未点击前的图片:




这是点击后的效果:



请问是哪里出问题了?



评分

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

查看全部评分

2 个回复

倒序浏览
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

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


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

  36. </head>
  37.        
  38. <body>

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

  49.         <dl>
  50.                 <dt onclick="list1()">上层项目</dt>
  51.                 <ul id="u2" class="u">
  52.                         <li>1.java</li>
  53.                         <li>2.Android</li>
  54.                         <li>3.云计算</li>
  55.                         <li>4.ASP.NET</li>
  56.                         <li>5.ios</li>
  57.                 </ul>
  58.         </dl>



  59. </body>
  60. </html>
复制代码


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

评分

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

查看全部评分

回复 使用道具 举报
凌慕枫 发表于 2014-3-29 09:26
好吧,我承认我这个跟你那个不一样,参考一下就好……

受教了
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马