Раскрывающийся список

Создать раскрывающийся список можно разными способами. Мы реализуем его с помощью вложенных элементов HTML UL и свойства display каскадных таблиц стилей, которое позволяет скрывать элементы страницы, не оставляя на ней даже выделенных под них блоков.

Поместим на страницу вложенный список:

< UL ID=" idList" NAME=" idList" >

< LI TITLE=" Щелкни и раскрой"

STYLE=" cursor: hand; " > Один

< UL ID=" idListOneA" NAME=" idListOneA"

STYLE=" display: none; cursor: default; " >

< LI TITLE=" Файл А" > A

< LI TITLE=" Файл Б" > Б

< /UL>

< LI TITLE=" Нераскрывающийся список" > Два

< LI TITLE=" Нераскрывающийся список" > Три

< /UL>

Список idList составлен из трех элементов < LI> и вложенного списка idListOneA, который не отображается (его свойство display равно none) и будет использован для создания раскрывающегося списка при щелчке на первом элементе списка. Строка, заданная в атрибуте TITLE, отображается в виде всплывающей подсказки при расположении курсора мыши над элементом. Этот фрагмент отображается как простой статический список из трех элементов (вложенный список не отображается!) с маркерами.

Чтобы сделать список раскрывающимся, необходимо запрограммировать действия для первого элемента внешнего списка.

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

ONMOUSEOVER=" flashMe(this, 'red')"

ONMOUSEOUT=" flashMe(this, 'black')"

Функция flashMe(), изменяющая цвет шрифта элемента, задается следующим кодом:

function flashMe(eSrc, sColor) {

eSrc.style.color=sColor

}

Теперь остается добавить обработчик щелчка кнопки мыши в первый элемент списка idList, выполняющий функцию отображения вложенного списка idListOneA, если он скрыт, и скрывающий его, если он видим:

ONCLICK=" toggleList(this.children[0])"

При вызове функции для ссылки на вложенный список idListOneA используется конструкция this.children[0]. В ней this ссылается на элемент LI, а он непосредственно порождает единственный вложенный элемент — требуемый нам список idListOneA.

Исходный текст функции toggleList() приведен ниже:

function toggleListOneA(eTarget){

eTarget.style.display == " none"?

eTarget.style.display=" block":

eTarget.style.display=" none";

eTarget.style.color = 'black';

}

Для того, чтобы раскрывшийся список idListOneA не был красного цвета, как и элемент LI, в который он вложен (свойство color наследуется), в функции toggleList() его цвет устанавливается черным.

Окончательно исходный текст сценария раскрывающегося списка выглядит так:

Раскрывающийся список

< HEAD>

< SCRIPT>

<! --

function toggleListOneA(eTarget){

eTarget.style.display == " none"?

eTarget.style.display = " block":

eTarget.style.display = " none";

eTarget.style.color = 'black';

}

function flashMe(eSrc, sColor) {

eSrc.style.color=sColor

}

//-->

< /SCRIPT>

< STYLE TYPE=" text/css" > <! --

H1 {background-color: lightgrey;

font-family: Arial;

font-size: 11pt;

color: indianred;

}

#idListOne {

list-style-image: url(leaf.jpg);

color: black;

list-style-position: inside;

}

--> < /STYLE>

< /HEAD>

< H1> Пример 2.4: Раскрывающийся список < /H1>

< UL ID=" idListOne" NAME=" idListOne" >

< LI ONCLICK=" toggleListOneA(this.children[0])"

ONMOUSEOVER=" flashMe(this, 'red')"

ONMOUSEOUT=" flashMe(this, 'black')"

TITLE=" Щелкни и раскрой"

STYLE=" cursor: hand; " > Один

< UL ID=" idListOneA"

NAME=" idListOneA"

STYLE=" display: none; cursor: default; " >

< LI TITLE=" Файл А" > A

< LI TITLE=" Файл Б" > Б

< /UL>

< LI TITLE=" Нераскрывающийся список" > Два

< LI TITLE=" Нераскрывающийся список" > Три

< /UL>

Графический файл item.jpg в свойстве каскадных таблицей стилей item-style-image задает изображение маркера в списках. Свойство cursor определяет тип курсора мыши, когда он располагается над элементом. В нашем примере курсор будет меняться на изображение руки (значение свойства hand).

Раскрывшийся список закроется при щелчке на нем или на элементе LI, в который он вложен, так как в этом случае сработает эффект " всплытие" события. Если требуется, чтобы список закрывался только при щелчке на элементе LI, следует добавить в открывающий тег < UL> списка idListOneA обработчик события ONCLICK с кодом, прекращающим " всплытие" события:

ONCLICK=" window.event.cancelBubble=true"