Advertisement
Guest User

Untitled

a guest
Dec 8th, 2016
72
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 3.41 KB | None | 0 0
  1. <body>
  2. <h1>Пример раскрывающегося списка</h1>
  3. <ul class="expandable">
  4. <li>
  5. <a href="#">Книги</a>
  6. <ul class="expandable">
  7. <li>
  8. <a href="#">Отечественные</a>
  9. <ul class="expandable">
  10. <li><a href="#">Детективы</a></li>
  11. <li><a href="#">Научная фантастика</a></li>
  12. <li><a href="#">Исторические</a></li>
  13. </ul>
  14. </li>
  15. <li>
  16. <a href="#">Зарубежные</a>
  17. <ul class="expandable">
  18. <li><a href="#">Детективы</a></li>
  19. <li><a href="#">Научная фантастика</a></li>
  20. <li><a href="#">Исторические</a></li>
  21. </ul>
  22. </li>
  23. </ul>
  24. </li>
  25. <li>
  26. <a href="#">DVD</a>
  27. <ul class="expandable">
  28. <li>
  29. <a href="#">Отечественные</a>
  30. <ul class="expandable">
  31. <li><a href="#">Детективы</a></li>
  32. <li><a href="#">Научная фантастика</a></li>
  33. <li><a href="#">Исторические</a></li>
  34. </ul>
  35. </li>
  36. <li>
  37. <a href="#">Зарубежные</a>
  38. <ul class="expandable">
  39. <li><a href="#">Детективы</a></li>
  40. <li><a href="#">Научная фантастика</a></li>
  41. <li><a href="#">Исторические</a></li>
  42. </ul>
  43. </li>
  44. </ul>
  45. </li>
  46. </ul>
  47. </body>
  48.  
  49. <style type="text/css">
  50. ul.expandable li { list-style-image: url('images/point.gif') }
  51. li ul.expandable { display: none }
  52. </style>
  53.  
  54. function setPlusIcon(){
  55. var allLIs = document.getElementsByTagName("LI");
  56. for(var i = 0; i < allLIs.length; i++){
  57. var li = allLIs[i];
  58. var allULs = li.getElementsByTagName("UL");
  59. if(allULs.length > 0){
  60. if(allULs[0].className == "expandable")
  61. li.style.listStyleImage = "url('images/plus.gif')";
  62. }
  63. }
  64. var allA = document.getElementsByTagName('A');
  65. for(var i = 0; i < allA.length; i++){
  66. allA[i].addEventListener('click', aClick);
  67. }
  68. }
  69. window.onload = setPlusIcon;
  70.  
  71. function aClick(e){
  72. e = e || event;
  73. objA = e.target || e.srcElement;
  74. var li = objA.parentNode;
  75. console.log(li);
  76. var uls = li.getElementsByTagName("UL");
  77. if(uls.length == 0)return true;
  78. if(uls[0].style.display == ""){
  79. uls[0].style.display == "block";//**ВОТ ЗДЕСЬ НЕ УСТАНАВЛИВАЕТСЯ СВОЙСТВО block**
  80. li.style.listStyleImage = "url('images/minus.gif')";
  81. }
  82. else{
  83. uls[0].style.display == "";
  84. li.style.listStyleImage = "url('images/plus.gif')";
  85. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement