Javascript-форум - Использование css свойства display для подменю

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Использование css свойства display для подменю (https://javascript.ru/forum/misc/6947-ispolzovanie-css-svojjstva-display-dlya-podmenyu.html)

Использование css свойства display для подменю

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

Цитата:

Сообщение от Lex4e

Как результат, он появляется и тут же исчезает.

Ошибка где-то в другом месте кода.
удалите все не относящееся к делу, и выложите тут
только не забудьте обернуть код в соответствующие BB-теги
PS часто при удалении лишнего кода, и выплывает ошибка

Вот содержание 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";
}

Убрал всё лишнее и всё равно не пашет :(

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

<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>

сами теги к 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
рекомендую именно так писать

Спасибо:) щас почитая мануал про return false

забыл объяснить:
в конце обработчика событий предполагается обычно return
если обработчик возвращает true, то событие по умолчанию(переход по ссылке) выполняется
если возвращает false, то действие по умолчанию не выполняется

Понял. Большое человеческое спасибо :)