Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Выпадающее меню с использованием js (https://javascript.ru/forum/events/55309-vypadayushhee-menyu-s-ispolzovaniem-js.html)

sana 22.04.2015 16:35
Выпадающее меню с использованием js
 
Добрый день,
Пытаюсь сделать Выпадающее меню с использованием 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>

рони 22.04.2015 16:43
sana,
где функция next?

sana 22.04.2015 17:28
Не скопировала...

// 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;


function next(elem) {
do {
elem = elem.nextSibling;
} while (elem && elem.nodeType != 1);
return elem;
}

tiundv 22.04.2015 17:34
Держи...Рабочий сто процентов...
$(document).ready(function () {
	$(".sub > a").click(function() {
		var ul = $(this).next(),
				clone = ul.clone().css({"height":"auto"}).appendTo(".mini-menu"),
				height = ul.css("height") === "0px" ? ul[0].scrollHeight + "px" : "0px";
		clone.remove();
		ul.animate({"height":height});
		return false;
	});
       $('.mini-menu > ul > li > a').click(function(){
	   $('.sub a').removeClass('active');
	   $(this).addClass('active');
	}),
       $('.sub ul li a').click(function(){
	   $('.sub ul li a').removeClass('active');
	   $(this).addClass('active');
	});
});


<div class="mini-menu">
     <ul>
            <li>
                <a href="#">Главная</a>
            </li>
            <li class="sub">
                <a>Пункт Меню - 1</a>
                <ul>
                   <li><a href="">Ссылка - 3</a></li>
                   <li><a href="">Ссылка - 4</a></li>
                   <li><a href="">Ссылка - 5</a></li>
                   <li><a href="">Ссылка - 6</a></li>
                   <li><a href="">Ссылка - 7</a></li>
                   <li><a href="">Ссылка - 8</a></li>
                </ul>
            </li>
            <li class="sub">
                <a href="">Меню</a>
                <ul>
                    <li><a href="">Ссылка - 2</a></li>
                    <li><a href="">Ссылка - 3</a></li>
                    <li><a href="">Ссылка - 4</a></li>
                    <li><a href="">Ссылка - 5</a></li>
                </ul>
            </li>
            <li>
                <a href="">ggg</a>
            </li>
     </ul>
</div>


.mini-menu{
    margin: 0px auto;
    max-width: 239px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.7);
    -webkit-box-shadow:0 0 8px rgba(0, 0, 0, 0.4);
    -moz-box-shadow:0 0 8px rgba(0, 0, 0, 0.4);
    box-shadow:0 0 8px rgba(0, 0, 0, 0.4);
    overflow: hidden;
    font: normal 14px Helvetica, Arial, sans-serif;
}
.mini-menu ul {
    list-style: none;
    margin: 0;
    padding:0;
    text-align:left;
}
.mini-menu > ul > li {
    position: relative;
}
.mini-menu > ul > li > a {
    display: block;	
    outline: 0;	
    padding: .7em 1em;	
    text-decoration: none;	
    color:#C9C9C9;	
    font-weight: normal;	
    text-shadow: 1px 1px 3px #111;	
    background: #333;
    border-bottom: 1px solid #222;
    background-image:-webkit-linear-gradient(#444, #333);
    background-image:-moz-linear-gradient(#444, #333);
    background-image:-ms-linear-gradient(#444, #333);
    background-image:linear-gradient(#444, #333);
    -webkit-box-shadow:inset 0 1px 0 0 rgba(250,250,250,0.1);
    -moz-box-shadow:inset 0 1px 0 0 rgba(250,250,250,0.1);
    box-shadow:inset 0 1px 0 0 rgba(250,250,250,0.1);
}
.mini-menu > ul > li > a:hover,
.mini-menu > ul > li > a.active {
    color:#f2bd00;
}
.mini-menu .sub > ul {
    counter-reset: items;
    height: 0;
    overflow: hidden;
    background: #eee;
    -webkit-box-shadow:inset 0 0 50px #bbb;
    -moz-box-shadow:inset 0 0 50px #bbb;
    box-shadow:inset 0 0 50px #bbb;
}
.mini-menu .sub > ul > li > a {
    counter-increment: items;
    color:#514b92;
    font-size: 12px;
    display: block;
    text-decoration: none;
    padding: .7em 1em;
    border-bottom: 1px dotted #bababa;
}
.mini-menu .sub > ul > li > a:hover,
.mini-menu .sub > ul > li > a.active {
    background: #d8d8d8;
    color: red;
    padding-left: 1.3em;
}
.mini-menu .sub > ul > li > a:after{
    content: "»";
    float: left;
    margin-right:6px;
    line-height: 12px;
}
.mini-menu .sub > ul:after {
    content: counter(items);
    font-size: 1em;
    display:inline-block;
    position: absolute;
    right: 10px;
    top: 6px;
    background: #333;
    line-height: 1em;
    padding: .5em .7em;
    color: #c9c9c9;
    text-indent: 0;
    text-align: center;
    text-shadow:0px 1px 0px rgba(0, 0, 0, .5);
    font-size: 0.8em;
    font-weight: 500;
    -webkit-border-radius:25%;
    -moz-border-radius:25%;
    border-radius:25%;
    -webkit-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15);
    -moz-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15);
    box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15);
}

sana 22.04.2015 17:35
Глаз замыливается, что и не замечаешь элементарных вещей...Существует ли какой-либо валидатор для js, как, например, есть для css и html?

рони 22.04.2015 18:16
sana,
для проверки кода можно использовать консоль - есть в каждом браузере https://learn.javascript.ru/devtools
вариант ниже ... тоже самое что у вас, но чуть покороче 
<!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>
function initExpand() {
    function fn(ul) {
        var parent = ul.parentNode;
        var h4 = parent.querySelector("h4");
        h4.onclick = function() {
            ul.classList.toggle("hidden")
        };
        ul.classList.add("hidden")
    }
    Array.prototype.forEach.call(document.querySelectorAll(".mainmenu .submenu"), fn)
}
window.onload = initExpand;

</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>
   </header>

</div>

</body>

</html>

sana 22.04.2015 18:42
спасибо))


Часовой пояс GMT +3, время: 21:02.