VPF::css активные строки списка - Форум программистов

Henpyxa

Дата 26.6.2011, 23:14 (ссылка)

(нет голосов)

Загрузка ...

Новичок

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

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

приветы
помогите совладать со списком: http://gzykov.bget.ru/pages/inst.html
сделал, чтобы он раскрывался при наведении курсора на строку. но это неудобно, т.к. при сворачивании строки курсор оказывается в 2-3 строках от прежнего положения. ну, вы понимаете, лажа полная.
пробовал через :active - сами понимаете, пока держишь - есть тебе счастье, потом не будет
хочу сделать так: нажал на строку, отпустил кнопку - список остался развернутым, нажал на следующий нужный - развернутая строка свернулась (!!!), новая - развернулась
я в javascript и php даже не знаю как helloworld написать, так что надеялся справиться css-ней.. подсоветуйте как быть =(

mark2011

Дата 28.6.2011, 17:30 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

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

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

То что вы описываете - событие onClick. Делается элементарно через JS. Здесь опишу просто алгоритм.

Тот блок, который вам надо сворачивать/показывать оборачиваете в div. Как-то так:

Код


<div id="block">
      Что-то что нужно показать или свернуть.
     Какой-то список, теги html... здесь может быть всё что угодно...
</div>

В JS делаем так:

Код


var st = document.getElementById('block').style.display;

if (st == 'none')
{
                  document.getElementById('block').style.display = 'block';
}
else
{
                  document.getElementById('block').style.display = 'none';
}

Всё это очень громоздко (достаточно громоздко). Поэтому вот гораздо более изящное решение на mootools:

Код


var st = $('block').getStyle('display');
if (st == 'none')
{
        $('block').setStyle('display', 'none');
}
else
{
        $('block').setStyle('display', 'block');
}

О Mootools можете почитать вот здесь.

А, да, код JS надо на что-то навесить.... получится как-то так:

Код


<a href="#" onClick="toggle()">По щелчку на этой ссылке будет работать функция javascript toggle()</a>
<div id="block">
      Что-то что нужно показать или свернуть.
     Какой-то список, теги html... здесь может быть всё что угодно...
</div>

Код


function toggle()
{
var st = document.getElementById('block').style.display;

if (st == 'none')
{
                  document.getElementById('block').style.display = 'block';
}
else
{
                  document.getElementById('block').style.display = 'none';
}
}

Это сообщение отредактировал(а) mark2011 - 28.6.2011, 17:33

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »