| |
|
|
| | Здравствуйте, программисты!
Задача:
При наведении курсора мыши на <li>Галерея</li> должен появляться список <ul></ul> c подменюшками. После того как курсор убран с <li>Галерея</li> список <ul></ul> снова исчезает.
Загвоздка:
При установке в CSS параметра display:none скрипт отказывается работать, когда устанавливаю параметр display: ' ' , то скрипт работает. Будьте добры, подскажите в чем может быть проблема?
Вот код:
<html>
<head>
<title></title>
<style>
ul.menu ul {
display:none;
}
</style>
</head>
<body>
<ul id="menu" class="menu">
<li><a href="#">Новости</a></li>
<li><a href="#">Галерея</a>
<ul>
<li><a href="#">Подменю 1</a></li>
<li><a href="#">Подменю 2</a></li>
<li><a href="#">Подменю 3</a></li>
<li><a href="#">Подменю 4</a></li>
<li><a href="#">Подменю 5</a></li>
</ul>
</li>
<li><a href="#">Личный Кабинет</a></li>
<li><a href="#">Гостевая Книга</a></li>
</ul>
<script language="javascript">
function func()
{
document.getElementById('menu').getElementsByTagName('ul')[0].style.display = '';;
return 1;
}
function func1()
{
document.getElementById('menu').getElementsByTagName('ul')[0].style.display = 'none';
return 1;
}
var h = document.getElementById('menu').getElementsByTagName('li')[1].getElementsByTagName('a')[0];
h.onmouseover = new Function("func(); return 1;");
h.onmouseout = new Function("func1(); return 1;");
</script>
</body>
</html>
|
| |
| |
|
|
| |
|
|
| |
для: SilentChild
(19.05.2011 в 15:45)
| | | display: none
Временно удаляет элемент из документа. Занимаемое им место не резервируется и веб-страница формируется так, словно элемента и не было. Изменить значение и сделать вновь видимым элемент можно с помощью скриптов, обращаясь к свойствам через объектную модель. В этом случае происходит переформатирование данных на странице с учетом вновь добавленного элемента.
Вы сначала удаляете элемент ul.menu ul а потом пытаетесь получить к нему доступ в функции func() | |
| |
|
|
| |
|
|
| |
для: lightning.say
(19.05.2011 в 16:37)
| | | Благодарю Вас! | |
| |
|
|
| |
|
|
| |
для: SilentChild
(19.05.2011 в 19:31)
| | | Никуда элемент из документа не удаляется при установке ему display: none.
Со страницы - да, исчезает. Но доступ через документ к элементу имеется.
Можете проверить, сделав простую замену в Вашем коде:
1) уберите стилевой блок
<style>
ul.menu ul {
display:none;
}
</style>
|
2) вместо него пропишите стиль прямо в теге:
<li><a href="#">Галерея</a>
<ul style="display: none">
|
И всё прекрасно будет работать.
-----
Проблема в том, что управлять свойством стиля, который указан не прямо в теге, а в стилевом блоке (или в присоединённом файле) надо не через объект style, а через объект currentStyle (и через getComputedStyle для Мозилла).
А вот когда ничего не указано (или в стилевом блоке подтверждаются дефолтные значения) - тогда управлять можно и через объект style.
----
PS. Абсолютно все return'ы в Вашем коде - лишние, никому не нужные и ни на что не влияющие.
[поправлено модератором] | |
| |
|
|
| |
|
|
| |
для: Абырвалг
(19.05.2011 в 20:52)
| | | Cпасибо огромное, ценная информация! | |
| |
|
|
| |
|
|
| |
для: SilentChild
(20.05.2011 в 18:22)
| | | Не удаётся установить новое значение свойства display следующим методом:
document.getElementById('menu').getElementsByTagName('ul')[0].currentStyle.display = '';
|
... и так тоже не удаётся:
var cs = window.getComputedStyle(document.getElementById('menu').getElementsByTagName('ul')[0]);
cs.getPropertyValue("display") = '';
|
Получить значение свойства display я этими способами могу, а вот назначить новые не удаётся. | |
| |
|
|
| |
|
|
| |
для: SilentChild
(20.05.2011 в 23:06)
| | | Мда... походу Вы меня не поняли.
Хотя, видимо, я сам виноват. Объяснял я - "как оно в принципе работает" (одновременно опровергая глупость насчёт "удаления"), но не объяснил - "как именно это надо реализовать".
Давайте попробую объяснить ИСЧО раз (как писала Екатерина Вторая Великая, умудряясь в слове из трёх букв делать четыре ошибки). И уже дам конкретную рекомендацию.
-----
1. Когда свойство стиля указано внутри тега, положим - <ul style="display: none"> - то Вы можете присвоить этому тегу скриптом ПУСТОТУ (две кавычки) - таким образом Вы вернёте тегу начальное (дефолтное) значение этого свойства стиля.
Сиречь, как бы произойдёт "трансформация": из <ul style="display: none"> получится <ul style="display:">, что браузер преобразует в дефолтное <ul style="display: block">.
И всё будет нормально работать.
Это понятно?
-----
2. Когда у Вас НЕТ внутри тега НИКАКОЙ записи об этом свойстве стиля, т. е. когда Вы указываете это свойство в блоке/файле, то браузер НЕ МОЖЕТ провести вышеуказанную "трансформацию".
Ибо НЕКУДА браузеру прописывать пустоту - атрибута style со свойством display внутри тега НЕТ.
Браузер в этом случае, как я уже указывал в предыдущем сообщении, работает со свойством ТЕКУЩЕГО(current) СТИЛЯ.
Прописывая пустоту (две кавычки), Вы пытаетесь установить ОТСУТСТВИЕ ТЕКУЩЕГО(current) СТИЛЯ для свойства display.
А такового не бывает.
И не бывает ПО ОПРЕДЕЛЕНИЮ: какое-либо значение для ЛЮБОГО свойства ТЕКУЩЕГО(current) СТИЛЯ - оно ВСЕГДА ЕСТЬ.
-----
Надо устанавливать РЕАЛЬНОЕ ВАЛИДНОЕ значение.
Или 'block', или 'inline', или 'table', или 'ruby'... или вообще любое из существующих значений.
Но лучше всего - первое ('block'), так как оно является дефолтным значением свойства стиля display для тега <UL>.
(Для справки - для тега <LI> дефолтным является 'list-item')
И устанавливать надо через объект style.
-----
Въехали?
Если "не въехали", то - ВНИМАНИЕ! КОНКРЕТНАЯ РЕКОМЕНДАЦИЯ: просто вернитесь к исходному Вашему коду (который в самом первом сообщении) и в строке
document.getElementById('menu').getElementsByTagName('ul')[0].style.display = '';;
|
вместо двух подряд идущих кавычек напишите 'block' | |
| |
|
|
| |
|
|
| |
для: Абырвалг
(21.05.2011 в 01:05)
| | | Жму Вам руку, доходчивей просто некуда. Всё понял, во всё въехал. Всё работает. Спасибо огромное Вам! =) | |
| |
|
|
| |
|
|
| |
для: SilentChild
(21.05.2011 в 10:08)
| | | Такое меню можно и без JS обойтись...
http://www.cssmenumaker.com/ | |
| |
|
|
| |
|
|
| |
для: lightning.say
(21.05.2011 в 11:05)
| | | Да, согласен с Вами - обойтись можно и без JS.
Тут дело в том, что я хотел понять: как можно добраться до свойства элемента и изменить его значение с помощью JS. Меню - это лишь средство для изучения на примере процессов, механизмов связанных с JS. | |
| |
|
|
