0

Нужно сделать блок (div), при клике на который он будет разворачиваться, а при повторном - сворачиваться.

Вот что я делал:

        function Show_Service(g, SH){
            if(SH){
                if(g.offsetHeight < g.scrollHeight){
                    g.style.height = g.offsetHeight + 2 + "px";
                    setTimeout(function (){Show_Service(g, SH);}, 20);
                }
            } else {
                if(g.offsetHeight > 28){
                    g.style.height = g.offsetHeight - 2 + "px";
                    setTimeout(function (){Show_Service(g, SH);}, 20);
                }
            }
        }

<div onClick="Show_Service(this, (this.K = !this.K));">
    ...
</div>

При первом клике, все успешно разворачивается, а при повторном, происходит бесконечная рекурсия, т.е. условие if(g.offsetHeight > 28){ всегда истинно, хотя оно должно изменяться g.style.height = g.offsetHeight - 2 + "px";

В чем проблема?

JQuery не предлагайте...

С точки зрения кроссбраузерности, что тут можно изменить, добавить?

2 ответа 2

1

Можно и без JS совсем: http://jsfiddle.net/5U9pw/2/

1

Попробовал Ваш пример - всё работает. Единственное - добавил стиль "height:28px;overflow-y:hidden", чтоб изначально div был свернут.
"Зацикливаться" код может только в одном случае: если нажать на div до завершения анимации. В таком случае, два timeout'a работают одновременно: раскрывающий и закрывающий. Чтоб избавиться от этого, советую не передавать SH в качестве аргумента функции, а использовать более актуальное g.K.
Или другой вариант - избавиться от комплексов перед jQuery и использовать анимацию из коробки, которая и кроссбраузерность обеспечит, кстати :)

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.