Форум

qwe88 · #1 (**permalink**) 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 · #2 (**permalink**) 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 · #3 (**permalink**) 04.09.2015, 15:07

А без Jquery?

jeka2 · #4 (**permalink**) 04.09.2015, 17:39

Сообщение от qwe88

А без Jquery?

Плохо знаю javascript(((((

caetus · #5 (**permalink**) 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 · #6 (**permalink**) 05.09.2015, 13:20

Класс!
Спасибо, то что нужно.

Форум

Справочник

Discord чат

Курсы javascript