Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 07.01.2010, 13:24
Интересующийся
Отправить личное сообщение для Lex4e Посмотреть профиль Найти все сообщения от Lex4e
 
Регистрация: 07.01.2010
Сообщений: 12

Использование css свойства display для подменю
Всем привет и с Рождеством!
Буду весьма признателен в помоще разобраться в следующем вопросе:
Нужно что б при нажатии пункта меню (ссылки) появлялось подменю с несколкими пунктами, при нажатии на др. пункт это подменю исчезало.
Пункты меню у меня в виде ссылок в основной таблице, подменю - таблица вставленная в ячейку основной таблицы. По умолчанию (изначально) этой ячейке в css присвоено свойству display значение none (подменю отсутствует на мониторе):
#my_id {
display: none;
}
, при нажатии на кнопку меню (ссылку) формируется событие:
function visible()
{
document.getElementById("my_id").style.display="bl ok";
}
Как я понимаю этот блок (таблица подменю) должен появляться.
Как результат, он появляется и тут же исчезает. Я так понимаю, подгружаються изначальное значение свойства "none".
Как быть? Явно, где-то напорол
Ответить с цитированием
  #2 (permalink)  
Старый 07.01.2010, 13:30
Аватар для Gvozd
Матрос
Отправить личное сообщение для Gvozd Посмотреть профиль Найти все сообщения от Gvozd
 
Регистрация: 04.04.2008
Сообщений: 6,234

Сообщение от Lex4e
Как результат, он появляется и тут же исчезает.
Ошибка где-то в другом месте кода.
удалите все не относящееся к делу, и выложите тут
только не забудьте обернуть код в соответствующие BB-теги
PS часто при удалении лишнего кода, и выплывает ошибка
Ответить с цитированием
  #3 (permalink)  
Старый 07.01.2010, 13:45
Интересующийся
Отправить личное сообщение для Lex4e Посмотреть профиль Найти все сообщения от Lex4e
 
Регистрация: 07.01.2010
Сообщений: 12

Вот содержание index.php:

[head]
[link rel="stylesheet" type="text/css" href="my.css"/]
[script type="text/javascript" src="myscript.js"]
[/script]
[/head]
[body]
			
			[table]
			
			[tr][td][a href='' style="color:black;" onClick=visible_filters()]Фильтры питьевой воды[/a][/td][/tr]
			[tr][td id='filters']
				[table   style="margin-left: 15px;"]
				[tr][td][a href='' style="color:black;"]New Line (Сделано в Германии)[/a][/td][/tr]
				[tr][td][a href='' style="color:black;"]Классика (Польша)[/a][/td][/tr]
				[tr][td][a href='' style="color:black;"]Компакт[/a][/td][/tr]
				[/table]
				[/td][/tr]
			[tr][td][a href='' style="color:black;" onClick=exit()]Для офисов[/a][/td][/tr]
			[/table]		
				
[/body]

<br>
Содержание my.css:

#filters {
display: none;
}


и содержание myscript.js:

function visible_filters()
{

document.getElementById("filters").style.display=" block";

}

function exit()
{

document.getElementById("filters").style.display=" none";
}



Убрал всё лишнее и всё равно не пашет
Ответить с цитированием
  #4 (permalink)  
Старый 07.01.2010, 13:51
Интересующийся
Отправить личное сообщение для Lex4e Посмотреть профиль Найти все сообщения от Lex4e
 
Регистрация: 07.01.2010
Сообщений: 12

Вот в нормальном виде индекс:


<html>
<head>
<link rel="stylesheet" type="text/css" href="my.css"/>
<script type="text/javascript" src="myscript.js">
</script>
</head>
<body>

<table>

<tr><td><a href='' style="color:black;" onClick=visible_filters()>Фильтры питьевой воды</a></td></tr>
<tr><td id='filters'>
<table style="margin-left: 15px;">
<tr><td><a href='' style="color:black;">New Line (Сделано в Германии)</a></td></tr>
<tr><td><a href='' style="color:black;">Классика (Польша)</a></td></tr>
<tr><td><a href='' style="color:black;">Компакт</a></td></tr>
</table>
</td></tr>
<tr><td><a href='' style="color:black;" onClick=exit()>Для офисов</a></td></tr>
</table>

</body>
</html>
Ответить с цитированием
  #5 (permalink)  
Старый 07.01.2010, 14:49
Аватар для Gvozd
Матрос
Отправить личное сообщение для Gvozd Посмотреть профиль Найти все сообщения от Gvozd
 
Регистрация: 04.04.2008
Сообщений: 6,234

сами теги к BB-виду приводить не надо было
только обернуть HTML-код в BB-тег [ HTML ]
поправил.
обратите внимание на return false;
<head>
<style>
#filters {
display: none;
}
</style>
<script type="text/javascript">
function visible_filters()
{

document.getElementById("filters").style.display=" block";

}

function exit()
{

document.getElementById("filters").style.display=" none";
}
</script>
</head>
<body>
 
            <table>
 
            <tr><td><a href='' style="color:black;" onclick="visible_filters();return false;">Фильтры питьевой воды</a></td></tr>
            <tr><td id='filters'>
                <table   style="margin-left: 15px;">
                <tr><td><a href='' style="color:black;">New Line (Сделано в Германии)</a></td></tr>
                <tr><td><a href='' style="color:black;">Классика (Польша)</a></td></tr>
                <tr><td><a href='' style="color:black;">Компакт</a></td></tr>
                </table>
                </td></tr>
            <tr><td><a href='' style="color:black;" onclick="exit();return false;">Для офисов</a></td></tr>
            </table>        
 
</body>

также добавил кавычки для атрибутов,и перевел в нижний регистр название атрибута onclick
рекомендую именно так писать
Ответить с цитированием
  #6 (permalink)  
Старый 07.01.2010, 19:40
Интересующийся
Отправить личное сообщение для Lex4e Посмотреть профиль Найти все сообщения от Lex4e
 
Регистрация: 07.01.2010
Сообщений: 12

Спасибо щас почитая мануал про return false
Ответить с цитированием
  #7 (permalink)  
Старый 07.01.2010, 21:36
Аватар для Gvozd
Матрос
Отправить личное сообщение для Gvozd Посмотреть профиль Найти все сообщения от Gvozd
 
Регистрация: 04.04.2008
Сообщений: 6,234

забыл объяснить:
в конце обработчика событий предполагается обычно return
если обработчик возвращает true, то событие по умолчанию(переход по ссылке) выполняется
если возвращает false, то действие по умолчанию не выполняется
Ответить с цитированием
  #8 (permalink)  
Старый 07.01.2010, 22:02
Интересующийся
Отправить личное сообщение для Lex4e Посмотреть профиль Найти все сообщения от Lex4e
 
Регистрация: 07.01.2010
Сообщений: 12

Понял. Большое человеческое спасибо
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
jQuery поменять CSS цвет для текста при наведении мышью (.text:hover) JooZ jQuery 16 15.11.2010 19:56
Задание CSS для загруженных во фрейм страниц <Pool> Общие вопросы Javascript 1 14.01.2009 16:59
Запретить свойства из CSS SunnyDay Общие вопросы Javascript 11 29.09.2008 14:30