Вход

Просмотр полной версии : Аккордеон меню. Затык в сворачивании

qwe88
04.09.2015, 10:12
Добрый день!
Помогите, пожалуйста, застрял. В общем написал аккордеон меню, его работа устраивает. Вот только не могу сообразить, как сделать так, что бы при нажатии на раскрытый пункт, он свернулся
<style>
.menul ul li ul {
height: 0;
overflow: hidden;

-webkit-transition: all 1s;
-o-transition: all 1s;
-moz-transition: all 1s;
transition: all 1s;
}
</style>

<script>
window.onload = function () {
var rodpu = document.getElementsByClassName("rodpu");
for (i = 0; i < rodpu.length; i++) {
function mele(b) {
var vikl = 0;
rodpu[b].onclick = function () {
var podpu = this.getElementsByTagName("ul")[0];
var bispoul = podpu.scrollHeight;
for(i=0; i < rodpu.length; i++){
rodpu[i].getElementsByTagName("ul")[0].removeAttribute("style");
vikl = 0;
}
vikl = vikl + 1;
if (vikl > 1) {
vikl = 0;
}

if (vikl == 1) {
podpu.style.height = bispoul + "px";
}
else(
podpu.removeAttribute("style")
);
}
}
mele(i)
}
};
</script>

<div class="menul">
<ul>
<li class="rodpu">Пункт 1
<ul>
<li>Подпункт 1</li>
<li>Подпункт 2</li>
<li>Подпункт 3</li>
</ul>
</li>
<li class="rodpu">Пункт 2
<ul>
<li>Подпункт 1</li>
<li>Подпункт 2</li>
<li>Подпункт 3</li>
</ul>
</li>
<li class="rodpu">Пункт 3
<ul>
<li>Подпункт 1</li>
<li>Подпункт 2</li>
<li>Подпункт 3</li>
</ul>
</li>
</ul>
</div>

Т.е. нужно так, что бы пункты сворачивались при нажатии на другой пункт (как сейчас), и сворачивался развернутый пункт, если по нему еще раз шлепнуть
jeka2
04.09.2015, 14:44
$(document).ready(function(){
$('.menul').on('click', ' .rodpu', function(e){
if(this === e.target)
{
if($(this).hasClass('active'))
//Сворачиваем
{
$(this).find('ul').stop().animate({height: 0}, 500);
$(this).removeClass('active');
}
else
//Разворачиваем
{
var height = 0;
$(this).find('li').each(function(){
height += $(this).outerHeight();
});

$(this).find('ul').stop().animate({height: height}, 500);
$(this).addClass('active');
}
}
});
});
qwe88
04.09.2015, 15:07
А без Jquery?
jeka2
04.09.2015, 17:39
А без Jquery?

Плохо знаю javascript(((((
caetus
05.09.2015, 10:50
меню добавляй сколько угодно

<style>
#div ul li {
overflow: hidden;
}


.anim {
overflow: hidden;
transition: all 1s;
-webkit-transition: all 1s;
height: 0px;
}

</style>
<body>
<ul id="div">
<li class="active"> 1
<ul class="anim">
<li >1</li>
<li >2</li>
<li >3</li>
</ul>
</li>

<li class="active"> 2
<ul class="anim">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</li>


<li class="active"> 3
<ul class="anim">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</li>
</ul>
</body>

<script>
var div = document.getElementById('div');


div.addEventListener('click', function (e) {
e = e.target || e.srcElement;
var flag;

if(!e.className.match(/active/)) return;

var h = e.children[0].scrollHeight
if(e.children[0].style.height == h+'px') flag = true;

var len = e.parentNode; len = len.children;
for(var i = 0; i < len.length; i++) len[i].children[0].style.height = 0 + 'px';

if(flag) return;
e.children[0].style.height = h+'px';
},false)
</script>
qwe88
05.09.2015, 13:20
Класс!
Спасибо, то что нужно.