спасибо! под таблицы теперь уже не принципиально ;)
|
[quote=M.C.;4541]Андрей, пытаюсь сделать как тут: http://anton.shevchuk.name/wp-demo/j...ccordion1.html
там справа есть иконка, когда закрыто, она показывает вниз, когда открыто - наверх (это один gif-рисунок, просто он стилями меняет свое положение) вот как я представил код скрипта:
// Обворачиваем функцию toggle в локальное замыкание:
var toggle = function() {
// Ссылка на текущий открытый div:
var currentDiv = null;
// Ссылка на текущий класс:
var currentClass = null;
// Функция для "раскрытия" элемента:
function open(divElement, classElement) {
// Запоминаем и прячем класс:
currentClass = classElement;
currentClass = document.getElementByClass("bg_headers");
// Тут можно добавить эффект "плавного" открытия:
divElement.style.display = "block";
currentDiv = divElement;
}
// Функция для "закрытия" элемента:
function close(divElement, classElement) {
// Показываем класс и "забываем":
currentClass = document.getElementbyClass("bg_headers_active");
currentAnchor = null;
// Тут можно добавить эффект "плавного" закрытия:
divElement.style.display = "none";
currentDiv = null;
}
// Возвращаем функцию, которая будет вызываться по toggle()
return function(divID, classID) {
// Получаем элемент из DOM
var divElement = document.getElementById(divID);
var classElement = document.getElementByClass(classID)
// Если такой есть:
if (divElement) {
// Если уже открыт этот div, то просто закрываем.
if (divElement === currentDiv) {
close(currentDiv, currentClass);
// Если открыт другой div, то закрываем и открываем текущий:
} else if(currentDiv != null) {
close(currentDiv, currentClass);
open(divElement, classElement);
// Иначе - просто открываем:
} else {
open(divElement, classElement);
}
}
}
// Вызываем нашу "обертку", теперь toggle() вызывает функцию, описанную по "return"
}();
вот что у меня в CSS:
.bg_headers {
background: #e9e7e7 url(../images/icons/arrow-square.gif) no-repeat right -51px;
border: solid 1px #c4c4c4;
padding: 3px;
}
.bg_headers:hover {
background-color: #e3e2e2;
}
.bg_headers_active {
background-position: right 5px;
}
но что-то не работает :([/QUOT] А вы уверены что есть такой метод - document.getElementByClass("bg_headers"); Даже если есть (у меня правда никогда не работало) то возврашает он коллекцию объектов а значит при обращении надо указывать еще индекс в коллекции document.getElementByClass("bg_headers")[0]; |
сделай это массивом всё
типо array(divID1, divID1, ....) а потом в коде переворку циклом фор делай |
а как можно сделать hide, только чтоб блок открывался медленно...
|
всмысле плавно...
|
по таймауту понемногу...
|
А примерчик можно?
|
можно. гугли...
|
Спасибо.
вот че нашол примерно то что мне надо. <html><head> <script type="text/javascript" src="jquery.js"></script> <SCRIPT type=text/javascript> function initSpoilers(context) { var context = context || 'body'; $('div.spoiler-head', $(context)) .click(function(){ $(this).toggleClass('unfolded'); $(this).next('div.spoiler-body').slideToggle('fast'); }) ; } $(document).ready(function(){ initSpoilers('body'); }); </SCRIPT> <link href="spoiler.css" rel="stylesheet" type="text/css" /> </head><body> <div class="spoiler-wrap"><div class="spoiler-head folded clickable">1</div><div class="spoiler-body">2</div></div> </body></html> содержимое css .spoiler-wrap { clear: both; } .spoiler-body { display: none; } .clickable { cursor: pointer; } .folded { display: block; } .unfolded { display: block; } спринципе все отлично работает, но как сделать чтоп она отъезжала не от клика а от наведения мыши... |
так как здесь используется jquery (а я категорически неприемлю фреймворки), то иди в раздел jquery. Или ищи в коде слово click и меняй на что-то типа mouseover (как это реализовано в jquery я не знаю).
|
| Часовой пояс GMT +3, время: 20:13. |