Аккордеон меню. Затык в сворачивании
Добрый день!
Помогите, пожалуйста, застрял. В общем написал аккордеон меню, его работа устраивает. Вот только не могу сообразить, как сделать так, что бы при нажатии на раскрытый пункт, он свернулся
<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>
Т.е. нужно так, что бы пункты сворачивались при нажатии на другой пункт (как сейчас), и сворачивался развернутый пункт, если по нему еще раз шлепнуть |
$(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');
}
}
});
});
|
А без Jquery?
|
Цитата:
|
меню добавляй сколько угодно
<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>
|
Класс!
Спасибо, то что нужно. |
| Часовой пояс GMT +3, время: 08:15. |