Модераторы: Sardar, Aliance
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> скрипт скрытия/раскрытия элемнта, не хочет правильно работать 
V
    Опции темы
Acrobat
Дата 17.1.2009, 21:32 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 29
Регистрация: 4.4.2007

Репутация: нет
Всего: нет



Здравствуйте, имеется проблема со скриптом плавно скрытие/показ элемента, если один раз элемент раскрыть, а потом скрыть - то больше он не раскрывается. Прошу помочь советом, т.к. сам не могу понять в чем дела. Сразу скажу - скритп не мой.
Код

<html>
<head>
    <script type="text/javascript">
    // Обворачиваем функцию toggle в локальное замыкание:
        var toggle = function() {
            // Ссылка на текущий открытый div:
            var currentDiv = null;
            // Текущая ссылка
            var currentAnchor = null;
 
            // Функция для "раскрытия" элемента:
            function open(divElement, linkElement) {
                // Запоминаем и прячем ссылку:
                currentAnchor = linkElement;
                // Прибавляем "_active" к имени класса:
                currentAnchor.className += "_active";
 
                // Тут можно добавить эффект "плавного" открытия:
                divElement.style.display = "block";
                // Убираем отображение содержания за границами элемента
                divElement.style.overflowY = "hidden";
                // Получаем реальную высоту объекта
                var height = divElement.offsetHeight;
                // Делаем её "нулевой"
                divElement.style.height = "0px";
                // Увеличиваем размер до реальной высоты:
                for(var i=0;i<height;i++) {
                    setTimeout(function() {
                        divElement.style.height = parseInt(divElement.style.height) + 1;
                    }, i);
                }
                // Возвращаем значение overflowY
                setTimeout(function() {
                    divElement.style.overflowY = "auto";
                }, height);
                
                currentDiv = divElement;
            }
 
            // Функция для "закрытия" элемента:
            function close(divElement) {
                if (currentAnchor) {
                    // Убираем "_active" и "забываем":
                    currentAnchor.className = currentAnchor.className.replace("_active", "");
                    currentAnchor = null;
                }
                
                // Убираем отображение содержания за границами элемента
                divElement.style.overflowY = "hidden";
                // Получаем реальную высоту объекта
                var height = divElement.offsetHeight;
                // Устанавливаем её объекту (в случае если не менялось скриптом):
                divElement.style.height = height + "px";
                // Уменьшаем размер до нуля:
                for(var i=0;i<height;i++) {
                    setTimeout(function() {
                        divElement.style.height = parseInt(divElement.style.height) - 1;
                    }, i);
                }
                // Возвращаем изначальные значения и "прячем" элемент
                setTimeout(function() {
                    divElement.style.overflowY = "auto";
                    divElement.style.display = "none";
                    divElement.style.height = height + "px";
                }, height);
                
                currentDiv = null;
            }
 
            // Возвращаем функцию, которая будет вызываться по toggle()
            return function(divID, link) {
                // Получаем элемент из DOM
                var divElement = document.getElementById(divID);
                
                // Если не передан link будем считать, что это инициализация:
                if (!link) {
                    currentDiv = divElement;
                    return true;
                }
                
                // Если такой есть:
                if (divElement) {
                    // Если уже открыт какой-то div - закрываем.
                    if(currentDiv != null) close(currentDiv);
                    // Открываем вызваный.
                    open(divElement, link);
                }
            }
        // Вызываем нашу "обертку", теперь toggle() вызывает функцию, описанную по "return"
        }();
    </script>
    <style>
    a.bg_headers,
    a.bg_headers_active    {
        display: block;
        background: #e9e7e7 url(arrow-square.gif) no-repeat right -51px;
        border: solid 1px #c4c4c4;
        padding: 3px;
    }
    
    a.bg_headers:hover,
    a.bg_headers_active:hover {
            background-color: #e3e2e2;
    }
    
    a.bg_headers_active {
            background-position: right 5px;
    }
    
    .myDiv {
        display: none;
    }
    </style>
</head>
<!-- инициализируем открытый div -->
<body onload="toggle('div1')">
    <a href="#" onclick="toggle('div1', this)" class="bg_headers">Ссылка 1</a>
    <div id="div1">
    Содержание 1<br />

    Содержание 1<br />
    Содержание 1<br />
    Содержание 1<br />
    Содержание 1<br />
    Содержание 1<br />
    Содержание 1<br />

    Содержание 1<br />
    Содержание 1<br />
    Содержание 1<br />
    Содержание 1<br />
    Содержание 1<br />
    Содержание 1<br />

    Содержание 1
    </div>
     
    <a href="#" onclick="toggle('div2', this)" class="bg_headers">Ссылка 2</a>
    <div id="div2" class="myDiv">
    Содержание 2<br />
    Содержание 2<br />
    Содержание 2<br />

    Содержание 2<br />
    Содержание 2<br />
    Содержание 2<br />
    Содержание 2<br />
    Содержание 2<br />
    Содержание 2<br />

    Содержание 2<br />
    Содержание 2<br />
    Содержание 2
    </div>
     
    <a href="#" onclick="toggle('div3', this)" class="bg_headers">Ссылка 3</a>
    <div id="div3" class="myDiv">
    Содержание 3<br />

    Содержание 3<br />
    Содержание 3<br />
    Содержание 3<br />
    Содержание 3<br />
    Содержание 3<br />
    Содержание 3<br />

    Содержание 3<br />
    Содержание 3<br />
    Содержание 3<br />
    Содержание 3<br />
    Содержание 3<br />
    Содержание 3
    </div>

</body>
</html>


Спасибо.
PM MAIL   Вверх
ksnk
Дата 18.1.2009, 11:10 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 84
Всего: 386



Acrobat, чем разбираться в "несвоем" скрипте с труднопонимаемой логикой и труднолоцируемыми глюками, лучше посмотреть в сторону готовых решений.

Такую фенечку искать в Гугле по словам "Accordion javascript". Ее реализаций есть дофига для всех фреймворков. Есть даже и на чистом JS.


--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
krundetz
Дата 18.1.2009, 14:05 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Вечный странник
***


Профиль
Группа: Завсегдатай
Сообщений: 1400
Регистрация: 14.6.2007
Где: НН(Сормово)

Репутация: 1
Всего: 69



Acrobat, поддержу ksnk только конкретезирую смотри в сторону jQuery там эта возможность в ядре есть

Это сообщение отредактировал(а) krundetz - 18.1.2009, 14:08


--------------------
!цензоры - Хранитель стратегической жидкости
Группа ТГВ
Группа Нижний Новгород
user posted image
PM MAIL   Вверх
Aliance
Дата 18.1.2009, 14:28 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


I ♥ <script>
****


Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 55
Всего: 137



Код

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
$( function()
    {
        $( 'div.expand' ).bind( 'click', function()
            {
                $( this ).toggle( 'slow' );
            }
        );
    }
);
</script>
...
<div class="expand">test</div>
<div class="expand">test 2</div>
<div class="expand">test 3</div>

PM MAIL WWW ICQ Skype   Вверх
ksnk
Дата 18.1.2009, 16:45 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 84
Всего: 386



Aliance, там еще и закрываются остальные открытые пункты...


--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
Aliance
Дата 20.1.2009, 18:01 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


I ♥ <script>
****


Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 55
Всего: 137



Да, прошу прощения:
Код

$( function()
    {
        $( 'div.expand' ).each( fucntion()
            {
                $( this ).bind( 'click', function()
                    {
                        $( this ).toggle( 'slow' );
                    }
                );
            }
        );
    }
);


Это сообщение отредактировал(а) Aliance - 20.1.2009, 18:01
PM MAIL WWW ICQ Skype   Вверх
ksnk
Дата 20.1.2009, 18:56 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 84
Всего: 386



Aliance, А чем это отличается от предыдущего варианта?

Если уж мастерить на jQuery то, что было, то как-нибудь так smile
Код

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
$( function()
    {
        var current;
        $( 'div.tab' ).click(function()
            {
                if (current && (current!=this))
                    $( current ).find('.expand').hide( 'slow' );
                current=this;
                $( this ).find('.expand').toggle( 'slow' );
            }
        );
    }
);
</script>
<style>
.expand {display:none;}
</style>
...
<div class="tab">click me
<div class="expand">test</div>
</div>
<div class="tab">click me
<div class="expand">test1</div>
</div>
<div class="tab">click me
<div class="expand">test2</div>
</div>




--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
Acrobat
Дата 20.1.2009, 19:05 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 29
Регистрация: 4.4.2007

Репутация: нет
Всего: нет



Всем спасибо!
То, что надо.
Alianceksnk - особенная благодарностьsmile


PM MAIL   Вверх
Aliance
Дата 21.1.2009, 09:51 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


I ♥ <script>
****


Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 55
Всего: 137



ksnk, ну вообще-то да, ничем не отличается ;)
Но работают оба варианта, может быть я просто не так задачу увидел?!


Acrobat, если Ваш вопрос решен, то справа вверху темы есть ссылка "Пометить как решённый", нажмите на нее.
PM MAIL WWW ICQ Skype   Вверх
  
Ответ в темуСоздание новой темы Создание опроса
Форум для вопросов, которые имеются в справочниках, но их поиск вызвал затруднения, или для разработчика требуется совет или просьба отыскать ошибку. Напоминаем: 1) чётко формулируйте вопрос, 2) приведите пример того, что уже сделано, 3) укажите явно, нужен работающий пример или подсказка о том, где найти информацию.
 
1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: Общие вопросы | Следующая тема »


 




[ Время генерации скрипта: 0.1097 ]   [ Использовано запросов: 21 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.