<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Документ Без Имени</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" type="text/javascript">
function DispHide(el) {
}
</script>
</head>
<body>
<ul>
<li><a href='java script:;' onClick='DispHide(this);'>Меню</a></li>
<ul class="hi">
<li><a href='java script:;' onClick='DispHide(this);'>Пункт 1</a></li>
</ul>
</ul>
</body>
</html>
Раскрывающееся меню. Получить вложенный элемент и показать его.
делаю меню:
menu.html:
style.css
не знаю что написать в function DispHide(el), чтобы показать скрытый элемент вместе с его внутренностями <ul class="hi">
помогите... использовать нудно display, но как? где то использовалось в интернете el.parentNode.getElementsByTagName, но у меня не работает(( помогите
menu.html:
Код:
style.css
Код:
.hi {
display:none;
}
display:none;
}
не знаю что написать в function DispHide(el), чтобы показать скрытый элемент вместе с его внутренностями <ul class="hi">
помогите... использовать нудно display, но как? где то использовалось в интернете el.parentNode.getElementsByTagName, но у меня не работает(( помогите
Ещё один лентяй, которому лень поискать, хотя бы по форуму %)
Код:
function DispHide(el) {
if(el.style.display == "none") {
el.style.display = "block";
} else {
el.style.display = "none";
}
}
if(el.style.display == "none") {
el.style.display = "block";
} else {
el.style.display = "none";
}
}
Цитата:
el.parentNode.getElementsByTagName, но у меня не работает
вы вообще это хотели использовать для отображения блоков?? :D:D:D не ну ппц :D
И что ему с этой функцией делать?
Распрощаться с меню при нажатии на ссылку? :)
Распрощаться с меню при нажатии на ссылку? :)
MrLinker, ну это уже его проблемы)))
2автор: если какой-то определнный элемент надо скрыть, то задаете ему аттрибут id и обращаетесь через document.getElementById("id_элемента");
2автор: если какой-то определнный элемент надо скрыть, то задаете ему аттрибут id и обращаетесь через document.getElementById("id_элемента");
Цитата: UAS
Ещё один лентяй, которому лень поискать, хотя бы по форуму %)
искал во всем инете, да и тут тоже....слепой))
Цитата: UAS
вы вообще это хотели использовать для отображения блоков?? :D:D:D не ну ппц :D
пример из инета (только там не список, а таблицы, вот так:
Код:
<style>
.hide {display: none}
.hide2 {display: none}
.show {display: block}
</style>
<script>
function setTables(el) {
var tables=el.parentNode.getElementsByTagName("TABLE") ;
for (var i=0; i<tables.length; i++) {
tables.className=(tables.className=='hide')?'show':'hide';
}
}
</script>
<table><tr>
<td>
<a href='java script:;' onClick='setTables(this);'>Меню</a>
<table border=0 width=170 class='hide' cellpadding="0" cellspacing="0" align=left><tr>
<td>
<a href='java script:;' onClick='setTables(this);'>Пункт1</a>
<table border=0 width=170 class='hide2' cellpadding="0" cellspacing="0" align=left> <tr>
<td>
<a href='1.html'>Пункт1.1</a>
</td></tr>
</table>
</td></tr>
</table>
</td></tr>
</table>
.hide {display: none}
.hide2 {display: none}
.show {display: block}
</style>
<script>
function setTables(el) {
var tables=el.parentNode.getElementsByTagName("TABLE") ;
for (var i=0; i<tables.length; i++) {
tables.className=(tables.className=='hide')?'show':'hide';
}
}
</script>
<table><tr>
<td>
<a href='java script:;' onClick='setTables(this);'>Меню</a>
<table border=0 width=170 class='hide' cellpadding="0" cellspacing="0" align=left><tr>
<td>
<a href='java script:;' onClick='setTables(this);'>Пункт1</a>
<table border=0 width=170 class='hide2' cellpadding="0" cellspacing="0" align=left> <tr>
<td>
<a href='1.html'>Пункт1.1</a>
</td></tr>
</table>
</td></tr>
</table>
</td></tr>
</table>
Цитата: UAS
Ещё один лентяй, которому лень поискать, хотя бы по форуму %)
Код:
function DispHide(el) {
if(el.style.display == "none") {
el.style.display = "block";
} else {
el.style.display = "none";
}
}
if(el.style.display == "none") {
el.style.display = "block";
} else {
el.style.display = "none";
}
}
не то!!!
это я знал.....
мне нужно скрыть внутренние элементы, а не сам элемент!!!!
MrLinker прав!!!
мне надо так, фактически так.
исходный код:
Код:
<link href="style.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" type="text/javascript">
function DispHide(el) {
if(el.style.display == "none") {
el.style.display = "block";
} else {
el.style.display = "none";
}
}
</script>
</head>
<body>
<ul>
<li><a href='java script:;' onClick='DispHide(this);'>Меню</a></li>
<ul class="hi">
<li><a href='java script:;' onClick='DispHide(this);'>Пункт 1</a></li>
</ul>
<li><a href='java script:;' onClick='DispHide(this);'>Меню2</a></li>
<ul class="hi">
<li><a href='java script:;' onClick='DispHide(this);'>Пункт 2</a></li>
</ul>
</ul>
</body>
<script language="JavaScript" type="text/javascript">
function DispHide(el) {
if(el.style.display == "none") {
el.style.display = "block";
} else {
el.style.display = "none";
}
}
</script>
</head>
<body>
<ul>
<li><a href='java script:;' onClick='DispHide(this);'>Меню</a></li>
<ul class="hi">
<li><a href='java script:;' onClick='DispHide(this);'>Пункт 1</a></li>
</ul>
<li><a href='java script:;' onClick='DispHide(this);'>Меню2</a></li>
<ul class="hi">
<li><a href='java script:;' onClick='DispHide(this);'>Пункт 2</a></li>
</ul>
</ul>
</body>
по нажатию на
Код:
<a href='java script:;' onClick='DispHide(this);'>Меню</a>
появляются все подэлементы
Код:
<ul class="hi">
т.е.
Код:
<li><a href='java script:;' onClick='DispHide(this);'>Пункт 1</a></li>
и все, которые я туда впишу (<li></li>) автоматически!! а не, чтоб я со всеми вручную показывал их
Цитата: UAS
2автор: если какой-то определнный элемент надо скрыть, то задаете ему аттрибут id и обращаетесь через document.getElementById("id_элемента");
так вот именно, мне нужно все элементы, вложенные в <ul>, а не один. А про это я знал
Ну так. document.getElementById("id) к UL, далее циклом проходите по всем вложенным элементам и отображаете. Всего-то почитайте документацию))
https://developer.mozilla.org/en/DOM/element.childNodes
Проходите по вложенным тегам, проверяете те они, или нет. И тем же самым hideDisp прячете/отображаете нужные элементы
https://developer.mozilla.org/en/DOM/element.childNodes
Проходите по вложенным тегам, проверяете те они, или нет. И тем же самым hideDisp прячете/отображаете нужные элементы
Цитата: UAS
Ну так. document.getElementById("id) к UL, далее циклом проходите по всем вложенным элементам и отображаете. Всего-то почитайте документацию))
https://developer.mozilla.org/en/DOM/element.childNodes
Проходите по вложенным тегам, проверяете те они, или нет. И тем же самым hideDisp прячете/отображаете нужные элементы
https://developer.mozilla.org/en/DOM/element.childNodes
Проходите по вложенным тегам, проверяете те они, или нет. И тем же самым hideDisp прячете/отображаете нужные элементы
ВО!ВО! то самое....
и еще.... я с JavaScript новичок почти), но как можно сделать глобальный обработчик событий?
Просто в моем случае прийдется в каждую ссылку писать OnClick, а можно ли отседить нажатия на все ссылки одним событием, обработчиком?Думаю, вы меня понимаете.... в начале я допустим, как нибуть JS пишу:
Отслеживать все нажатия на ссылки и обрабатывать функцией такой-то.
возможно ли это?
Цитата: UAS
Ну так. document.getElementById("id) к UL, далее циклом проходите по всем вложенным элементам и отображаете.
Я не хочу получать тупо по id. я хочу более рационально... я получу родителя ссылки - <ul> а там в цикл
чтоб не доставать пошел искать как получить родителя)))
Код:
<link href="style.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" type="text/javascript">
function DispHide(el) {
el.parent().nextSimbling.style.display="block"
alert(el);
}
</script>
</head>
<body>
<ul>
<li><a href='java script:;' onClick='DispHide(this);'>Меню</a></li>
<ul class="hi" id="ili">
<li><a href='java script:;'>Пункт 1</a></li>
</ul>
<li><a href='java script:;' onClick='DispHide(this);'>Меню2</a></li>
<ul class="hi">
<li><a href='java script:;'>Пункт 2</a></li>
</ul>
</ul>
</body>
<script language="JavaScript" type="text/javascript">
function DispHide(el) {
el.parent().nextSimbling.style.display="block"
alert(el);
}
</script>
</head>
<body>
<ul>
<li><a href='java script:;' onClick='DispHide(this);'>Меню</a></li>
<ul class="hi" id="ili">
<li><a href='java script:;'>Пункт 1</a></li>
</ul>
<li><a href='java script:;' onClick='DispHide(this);'>Меню2</a></li>
<ul class="hi">
<li><a href='java script:;'>Пункт 2</a></li>
</ul>
</ul>
</body>
Почему ни parent, ни getParent, ни nextSimbling(следующий брат) здесь не работает? я хочу от ссылки постепенно перейти к <ul>(ну не люблю я ID). сначало я у ссылки хочу получить родителя, а потом у родителя(<LI>) получить брата( вложенного <ul>). Фнкции нашел в инете. но не пойму, где косячу. помогите. простите а ламерство)). запарился искать. 16 лет мне. какой из меня прогер?;)
Цитата: UAS
2автор: если какой-то определнный элемент надо скрыть, то задаете ему аттрибут id и обращаетесь через document.getElementById("id_элемента");
XPath рулит ;)
Цитата: NextTime
Почему ни parent, ни getParent, ни nextSimbling(следующий брат) здесь не работает? я хочу от ссылки постепенно перейти к <ul>(ну не люблю я ID). сначало я у ссылки хочу получить родителя, а потом у родителя(<LI>) получить брата( вложенного <ul>).
Потому что nextSimbling дает тебе брата ul, но не того, что ты ожидаешь, а другуго. У тебя в исходном коде ведь код ведь не в одну строку, а множество строк. А это переносы строк и пробелы которые в DOM представлены в виде текстовых узлов. И только в тупом IE, вразрез с W3C DOM спецификацией, не создаются текстовые узлы, а элементы в DOM расположены так как это видит человек.
Читать это http://phpclub.ru/detail/article/2003-05-12 и читать не один раз.
Цитата: NextTime
16 лет мне. какой из меня прогер?;)
Гнилые отмазы. Назвался груздем, так и полезай в кузов. Не прогер? Так и не бересь за это. Прожим? Ну так и читаем документацию, статьи и не хватается сразу за код.
К слову, я вообще инженер по ремонту подвижного состава железных дорог. И ничего. Взялся что-то писать, значит сижу и читаю пока не мойму что нужно делать.
alekciy, не отрицаю=) Кстати, особо серьезно с ним не работал никогда, так что не приводил в пример) Да и автору будет намного проще реализовать как я сказал, мне кажется=) Хотя дело его)
Я, кстати, вот этими всеми вещами начал заниматься сам 3 года назад, когда было тоже 16.5 лет примерно. Ну так ниче, сидел, ботанил, вникал=) Со временем научился же)
Я, кстати, вот этими всеми вещами начал заниматься сам 3 года назад, когда было тоже 16.5 лет примерно. Ну так ниче, сидел, ботанил, вникал=) Со временем научился же)
Не ссылка, а каша. Сначало еще все понятно, а потом каша...
Придется делать через id:(
Я JS года 2 назад не плохо знал, а сейчас все забыл... Придется все перечитывать:(
А вообще, я веб программированием с 12 лет занимаюсь... Просто эта учеба...мешает мне. наскоками им занимаюсь. тем более ща в колледже надо на вб.нет писать...ужас
И еще... Ведь у 2-х элементов не может быть одинаковый id?
А то было бы легче перебрать все элементы с одним ид в цикле...
Придется делать через id:(
Я JS года 2 назад не плохо знал, а сейчас все забыл... Придется все перечитывать:(
А вообще, я веб программированием с 12 лет занимаюсь... Просто эта учеба...мешает мне. наскоками им занимаюсь. тем более ща в колледже надо на вб.нет писать...ужас
И еще... Ведь у 2-х элементов не может быть одинаковый id?
А то было бы легче перебрать все элементы с одним ид в цикле...
Почитал про XPath... Прикольно очень.... Нашел библиотеку JS<->XPath, но тем не менее буду делать через Id
Ну знаете) Если серьезно занимались бы, то не забыли) Я щас тоже сижу учу C++ с Java, а последний проект на пхп писал примерно год назад, даже чуть больше. Ну дык все помню, так что alekciy правильно сказал =)
ID можно иметь одинаковый, но это, конечно, не желательно, так как сами понимаете, что ID на то и ID, чтобы однозначно определяеть элемент.
Ну и понять не могу, чего ломаетесь-то? Получить всех child узла (ul) и провести на них dispHide проблем не составляет, от силы строчек 6, тем более в ссылке, мной указанной, есть примеры и прочее.
Ну или реально юзай уже XPath
ID можно иметь одинаковый, но это, конечно, не желательно, так как сами понимаете, что ID на то и ID, чтобы однозначно определяеть элемент.
Ну и понять не могу, чего ломаетесь-то? Получить всех child узла (ul) и провести на них dispHide проблем не составляет, от силы строчек 6, тем более в ссылке, мной указанной, есть примеры и прочее.
Ну или реально юзай уже XPath
та нет проблем...)) просто я узнаю новое и другие способы сделать это.....
и вот.... если одинаковый Id у нескольких, то как их получить всех с этим ID? через getElementById ведь один вернется ток?
и вот.... если одинаковый Id у нескольких, то как их получить всех с этим ID? через getElementById ведь один вернется ток?
ну это я не знаю. Возьмите да проверьте! Или массив, или элемент. Если массив, то работаете как с массивом. А вообще вам сказали 2 верных способа. Вы только извращенством занимаетесь
да я знаю)) рабочий код:
menu.html:
style.css:
menu.html:
Код:
<link href="style.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" type="text/javascript">
function DispHide(id) {
var el=document.getElementById(id);
if(el.style.display == "none") {
el.style.display = "block";
} else {
el.style.display = "none";
}
}
</script>
</head>
<body>
<ul>
<li><a href='java script:;' onClick='DispHide("ul1");'>Элемент 1</a></li>
<ul class="hide" id="ul1">
<li><a href='java script:;'>Пункт 1</a></li>
</ul>
<li><a href='java script:;' onClick='DispHide("ul2");'>Элемент 2</a></li>
<ul class="hide" id="ul2">
<li><a href='java script:;'>Пункт 1</a></li>
</ul>
</ul>
</body>
<script language="JavaScript" type="text/javascript">
function DispHide(id) {
var el=document.getElementById(id);
if(el.style.display == "none") {
el.style.display = "block";
} else {
el.style.display = "none";
}
}
</script>
</head>
<body>
<ul>
<li><a href='java script:;' onClick='DispHide("ul1");'>Элемент 1</a></li>
<ul class="hide" id="ul1">
<li><a href='java script:;'>Пункт 1</a></li>
</ul>
<li><a href='java script:;' onClick='DispHide("ul2");'>Элемент 2</a></li>
<ul class="hide" id="ul2">
<li><a href='java script:;'>Пункт 1</a></li>
</ul>
</ul>
</body>
style.css:
Код:
.hide {
display:none;
}
display:none;
}
Цитата: UAS
ID можно иметь одинаковый, но это, конечно, не желательно, так как сами понимаете, что ID на то и ID, чтобы однозначно определяеть элемент.
Нельзя. В спецификации четко сказано:
[QUOTE=HTML4]
Определения атрибутов
id = name [CS]
Устанавливает имя элемента. Имя должно быть уникальным для данного документа.
[/QUOTE]
Ясное дело, что можно наставить кучу одинаковых id, но тут уж как с грибами... все грибы съедобные, но ... ;)
Цитата: NextTime
та нет проблем...)) просто я узнаю новое и другие способы сделать это.....
и вот.... если одинаковый Id у нескольких, то как их получить всех с этим ID? через getElementById ведь один вернется ток?
и вот.... если одинаковый Id у нескольких, то как их получить всех с этим ID? через getElementById ведь один вернется ток?
Цитирую:
[QUOTE=Document Object Model (DOM) Level 3 Core Specification]
Returns the Element that has an ID attribute with the given value. If no such element exists, this returns null. If more than one element has an ID attribute with that value, what is returned is undefined.
[/QUOTE]
Одна проблемка... почему меню окрывается со второго раза?
Такое ощущение, что, установленное значение "none" через css считается в JS не "none" и идет в первый раз по ветке else и принудительно ставит его в "none", а потом уже норм робит.... мой код на 2 стр.
Отследил через alert()... в первый раз приходит значение "", т.е. пустая строка.... почему? я могу написать OR ...=="", но мне бы хотелось знать почему....
Такое ощущение, что, установленное значение "none" через css считается в JS не "none" и идет в первый раз по ветке else и принудительно ставит его в "none", а потом уже норм робит.... мой код на 2 стр.
Отследил через alert()... в первый раз приходит значение "", т.е. пустая строка.... почему? я могу написать OR ...=="", но мне бы хотелось знать почему....
Цитата: alekciy
Нельзя. В спецификации четко сказано:
да это я знаю=) Я ж и говорю, что понаставить их можно сколько, но это неверно, ибо ID на то и создан, для идеальности. Т.е. не верно юзать несолько ID
Цитата: NextTime
Одна проблемка... почему меню окрывается со второго раза?
Такое ощущение, что, установленное значение "none" через css считается в JS не "none" и идет в первый раз по ветке else и принудительно ставит его в "none", а потом уже норм робит.... мой код на 2 стр.
Такое ощущение, что, установленное значение "none" через css считается в JS не "none" и идет в первый раз по ветке else и принудительно ставит его в "none", а потом уже норм робит.... мой код на 2 стр.
display:none; прописывай не в css, а в самом теге в аттрибуте style. У меня тоже такая проблема обычно. Хз от чего=)
Цитата: UAS
display:none; прописывай не в css, а в самом теге в аттрибуте style. У меня тоже такая проблема обычно. Хз от чего=)
спасибо!!! работает!!! огромное!!! ужасно помогли!! спасибо, что терпели такого ламера!
закрывайте тему
Цитата: UAS
display:none; прописывай не в css, а в самом теге в аттрибуте style. У меня тоже такая проблема обычно. Хз от чего=)
Это не проблема, а не знание ;)
Через style можно получить только инлайн свойства, стили же могут относиться ко многим элемента, а не только к заданному, поэтому и искать их нужно не в локальных свойствах элемента, а в более глобальных объектах.
Код:
function getStyles(elm)
{
var styles = document.styleSheets.item(0).cssRules;
for(var i = 0, l = styles.length; i < l; i++)
{
alert('Селектор: '+styles.item(i).selectorText+"\r\nзначение: "+styles.item(i).selectorText.style);
}
}
{
var styles = document.styleSheets.item(0).cssRules;
for(var i = 0, l = styles.length; i < l; i++)
{
alert('Селектор: '+styles.item(i).selectorText+"\r\nзначение: "+styles.item(i).selectorText.style);
}
}
Вообще, не айс, что автор темы не достиг поставленной задачи...
В любом случае, надо хотя бы списки вкладывать правильно.
IE то все исправит, а вот остальные иначе поймут структуру.
Т.е. <ul> нужно вкладывать внутрь <li> родительского списка.
Тогда все браузеры поймут нас как надо. А значит, приведенный ниже пример меню без id, должен адекватно работать ;)
[HTML]<ul>
<li>
<a href='#' onClick='toggle(this)'>Элемент 1</a>
<ul class="hide">
<li>
<a href='#' onClick='toggle(this)'>Пункт 1</a>
<ul>
<li><a href='#'>Подпункт 1</a></li>
<li><a href='#'>Подпункт 2</a></li>
<li><a href='#'>Подпункт 3</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href='#' onClick='toggle(this)'>Элемент 2</a>
<ul class="hide">
<li><a href='#'>Пункт 1</a></li>
<li><a href='#'>Пункт 2</a></li>
</ul>
</li>
</ul>[/HTML]
[HTML].hide {
display: none
}
.show {
display: block
}[/HTML]
Любой уровень вложенности.
И, само собой, не стоит ничего вкладывать между ссылкой и вложенным списком...
В любом случае, надо хотя бы списки вкладывать правильно.
IE то все исправит, а вот остальные иначе поймут структуру.
Т.е. <ul> нужно вкладывать внутрь <li> родительского списка.
Тогда все браузеры поймут нас как надо. А значит, приведенный ниже пример меню без id, должен адекватно работать ;)
[HTML]<ul>
<li>
<a href='#' onClick='toggle(this)'>Элемент 1</a>
<ul class="hide">
<li>
<a href='#' onClick='toggle(this)'>Пункт 1</a>
<ul>
<li><a href='#'>Подпункт 1</a></li>
<li><a href='#'>Подпункт 2</a></li>
<li><a href='#'>Подпункт 3</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href='#' onClick='toggle(this)'>Элемент 2</a>
<ul class="hide">
<li><a href='#'>Пункт 1</a></li>
<li><a href='#'>Пункт 2</a></li>
</ul>
</li>
</ul>[/HTML]
Код:
function toggle(obj)
{
var el = obj.nextSibling.nextSibling;
el.className = (el.className=="hide"?"show":"hide");
}
{
var el = obj.nextSibling.nextSibling;
el.className = (el.className=="hide"?"show":"hide");
}
[HTML].hide {
display: none
}
.show {
display: block
}[/HTML]
Любой уровень вложенности.
И, само собой, не стоит ничего вкладывать между ссылкой и вложенным списком...