Javascript-форум - Показать сообщение отдельно

sana · #1 (**permalink**) 22.04.2015, 16:35

Добрый день,
Пытаюсь сделать Выпадающее меню с использованием js. Но не могу понять в чем дело, почему код не работает...

// Menu

function expand_click() {
  var expand = next(this),
      clsName = expand.className;

  expand.className = 'submenu' + (clsName.indexOf("hidden") >=0 ? '' : ' hidden');
}

function initExpand() {
  var expandera = document.getElementsByTagName("h4"), elem;
  for(var i = 0; i < expandera.length ;i++) {
    elem = expandera[i];
    if(elem.className == "expandera") {
      elem.onclick = expand_click;
      next(elem).className = "submenu hidden";
    }
  }
}

window.onload = initExpand;

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Menu</title>
    <link href="css/style.css" rel="stylesheet" type="text/css" media="screen">
    <style>
      .submenu { margin: 0; list-style: none; padding: 0; }
      .submenu.hidden {display: none; }
    </style>
    <script type="text/javascript" src="javascript1.js" ></script>
</head>

<body>

<div class="wrapper">

    <header>

    <nav>
        <ul class="mainmenu">
            <li><h4 class="expandera">Colors</h4>
                <ul class="submenu">
                    <li><a href="#">Black</a></li>
                    <li><a href="#">Red</a></li>
                    <li><a href="#">Blue</a></li>
                </ul>
            </li>
            <li><h4 class="expandera">Animals</h4>
                <ul class="submenu">
                    <li><a href="#">Bear</a></li>
                    <li><a href="#">Fox</a></li>
                    <li><a href="#">Dog</a></li>
                </ul>
            </li>
        </ul>
    </nav>


</div>

</body>

</html>