расширение раскрывающегося списка сверху вместо снизу с помощью JavaScript

Question

Хорошо, история состоит в том, что моим пользователям нужен выпадающий список с множественным выбором, которого нет в ASP.NET, поэтому я выбрал простое решение: я использую списки со включенным множественным выбором и запускаю их в размере 1 и onmouseover я изменяю размер, чтобы сказать 10, onmouseout устанавливает его обратно в единицу. Достаточно просто, и пользователи не знают разницы.

Теперь моя проблема связана с тем, что, поскольку у меня есть любое количество элементов управления в моем веб-приложении, я установил для этих списков более высокие номера z-index, чем у других элементов управления, что создает проблему: в моих списках ближе внизу страницы список расширяется ниже, а не выше, и часть списка выходит под нижнюю часть страницы, но поскольку onmouseout сбрасывает размер списка, я не могу прокрутить страницу вниз.

Кто-нибудь знает, что мне нужно установить, чтобы увеличить, а не уменьшить?

edit Кроме того, некоторые могут спросить: «Почему бы вам просто не переставить список на более высокую позицию на странице?», Причина, по которой этот вариант не подходит, состоит в том, что у меня более 40 элементов управления на странице, и если они сгруппированы, я не просто случайно разместил их там, где они есть (т.е. информация об инвестициях в одном разделе, учетная запись в другом, пригодность в другом)

Answer 1

РЕДАКТИРОВАТЬ: Стоит отметить, что нижеприведенная версия jQuery будет более компактной и, на мой взгляд, более понятной.

Glo, код, который у вас есть в данный момент, будет вам полезен, особенно если учесть, что вам будет сложно изменить то, что мы даем, или реализовать то, что мы могли бы описать. В любом случае, это работает так, как задумано в IE7, Firefox и Opera; Safari и Chrome выглядят странно: http://jsfiddle.net/bUFzq/35/ (изменено с http://www.plus2net.com/html_tutorial/html_frmddl.php).

CSS просто делает выбор доступным относительно размещения по умолчанию. Элементы могут быть расположены только относительно других элементов. `позиция: относительная; ' оставляет элемент там, где он был, пока вы его не переместите, в отличие от абсолютного и фиксированного. Он также располагается относительно краев своего ближайшего предка. (К несчастью, в ИТ-отрасли принято увеличивать Y вниз, а не вверх; просто на голову вверх или вниз.)

element.offsetHeight - это вычисленная высота элемента - насколько он велик на экране. element.style.bottom (как и его кузены top, left и right) устанавливает смещение элемента от соответствующего ребра в направлении центра элемента. setAttribute довольно понятен; он действует так, как если бы вы на самом деле редактировали HTML. Большинство свойств element.style (которых нет на всех других объектах) представляют и изменяют свойства CSS с аналогичными именами. Например, element.style.backgroundColor устанавливает свойство background-color.

addEvent - это функция, скопированная из Rock Solid addEvent () Дастина Диаса, потому что браузеры не очень хорошо согласны с тем, как делать события. Однако я бы поместил его сценарий в отдельный файл, а мой - в другой, если бы не работал в одной области сценария. Я сделал `var addEvent = init (); ' просто, чтобы вам не пришлось прокручивать его исходники, хотя это хороший пример хорошего кода.

mouseover & mouseout являются фактическими слушателями, явно вызываемыми с использованием apply 1), потому что мне нужно было это значение высоты для дальнейшего и 2), потому что по какой-то причине (по крайней мере, в jsFiddle) оно не начинается в правильном положении, и только если слушатели будут вызваны в таком порядке, он туда доберется.