黑马程序员技术交流社区

标题: 关于js上下层目录的问题 [打印本页]
作者: 沫然    时间: 2014-3-28 23:44
标题: 关于js上下层目录的问题
本帖最后由 沫然 于 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>
复制代码
这是未点击前的图片：




这是点击后的效果：



请问是哪里出问题了？



作者: 凌慕枫    时间: 2014-3-29 09:26
  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>
复制代码


好吧，我承认我这个跟你那个不一样，参考一下就好……
作者: 沫然    时间: 2014-3-29 11:18
凌慕枫 发表于 2014-3-29 09:26
好吧，我承认我这个跟你那个不一样，参考一下就好……

受教了



欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2