Показать сообщение отдельно
  #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.
Ответить с цитированием