Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 04.09.2015, 10:12
Аватар для qwe88
Кандидат Javascript-наук
Отправить личное сообщение для qwe88 Посмотреть профиль Найти все сообщения от qwe88
 
Регистрация: 14.06.2014
Сообщений: 137

Аккордеон меню. Затык в сворачивании
Добрый день!
Помогите, пожалуйста, застрял. В общем написал аккордеон меню, его работа устраивает. Вот только не могу сообразить, как сделать так, что бы при нажатии на раскрытый пункт, он свернулся
<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>


Т.е. нужно так, что бы пункты сворачивались при нажатии на другой пункт (как сейчас), и сворачивался развернутый пункт, если по нему еще раз шлепнуть

Последний раз редактировалось qwe88, 04.09.2015 в 11:50.
Ответить с цитированием
  #2 (permalink)  
Старый 04.09.2015, 14:44
Интересующийся
Отправить личное сообщение для jeka2 Посмотреть профиль Найти все сообщения от jeka2
 
Регистрация: 04.09.2014
Сообщений: 10

$(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');
            }
        }
    });
});
Ответить с цитированием
  #3 (permalink)  
Старый 04.09.2015, 15:07
Аватар для qwe88
Кандидат Javascript-наук
Отправить личное сообщение для qwe88 Посмотреть профиль Найти все сообщения от qwe88
 
Регистрация: 14.06.2014
Сообщений: 137

А без Jquery?
Ответить с цитированием
  #4 (permalink)  
Старый 04.09.2015, 17:39
Интересующийся
Отправить личное сообщение для jeka2 Посмотреть профиль Найти все сообщения от jeka2
 
Регистрация: 04.09.2014
Сообщений: 10

Сообщение от qwe88 Посмотреть сообщение
А без Jquery?
Плохо знаю javascript(((((
Ответить с цитированием
  #5 (permalink)  
Старый 05.09.2015, 10:50
Профессор
Отправить личное сообщение для caetus Посмотреть профиль Найти все сообщения от caetus
 
Регистрация: 23.09.2014
Сообщений: 197

меню добавляй сколько угодно
<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>

Последний раз редактировалось caetus, 05.09.2015 в 11:18.
Ответить с цитированием
  #6 (permalink)  
Старый 05.09.2015, 13:20
Аватар для qwe88
Кандидат Javascript-наук
Отправить личное сообщение для qwe88 Посмотреть профиль Найти все сообщения от qwe88
 
Регистрация: 14.06.2014
Сообщений: 137

Класс!
Спасибо, то что нужно.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Проблема с меню аккордеон masaniachko jQuery 9 17.06.2018 14:25
Бесконечноуровневое меню на CSS ruslan_mart Ваши сайты и скрипты 5 12.01.2015 20:59
Вертикальное меню - аккордеон. Проблема. notgosu Events/DOM/Window 5 23.01.2013 11:47
Аккордеон меню, как доработать код. Gawk Общие вопросы Javascript 1 23.07.2012 13:01
меню в стиле аккордеон из таблицы chdn Элементы интерфейса 1 10.11.2011 21:15