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