Раскрывающееся меню - JavaScript, Ajax

kirosin · 18.06.2010, 01:28

Код:

<head>
<script type="text/javascript"> function displ(ddd) { if (document.getElementById(ddd).style.display == 'none') {document.getElementById(ddd).style.display = 'block'} else {document.getElementById(ddd).style.display = 'none'} } </script>
</head>
<body>
<ul>
<li><a href="javascript: displ('pt1')">Пункт 1</a>
<p id="pt1" style="display: none;">Текст 1</p>
</li>
<li><a href="javascript: displ('pt2')">Пункт 2</a>
<p id="pt2" style="display: none;">Текст 2</p>
</li>
<li><a href="javascript: displ('pt3')">Пункт 3</a>
<p id="pt3" style="display: none;">Текст 3</p>
</li>
</ul>
</body>

есть вот такой код, кликаешь по пункту - появляется текст, кликаешь второй раз - он исчезает. Как сделать так, чтобы при клике на пункт он открывался, а если есть еще открытые пункты, чтоб они закрывались? То есть единовременно должен быть открыт только один из пунктов.

slips · 18.06.2010, 02:06

приблизительно так~ может где-то что и не учёл в силу сонного состояния

Код:

<body>
<ul>
<li><a href="" onclick="show(this,"pt0") return false;">Пункт 1</a>
<p id="pt0" style="display: none;">Текст 1</p>
</li>
<li><a href="" onclick="show(this,"pt1") return false;">Пункт 2</a>
<p id="pt1" style="display: none;">Текст 2</p>
</li>
<li><a href="" onclick="show(this,"pt2") return false;">Пункт 3</a>
<p id="pt2" style="display: none;">Текст 3</p>
</li>
</ul>
</body>

Код HTML:

 function show(athis,showblock){
    var cur=athis.parentNode;  // ссылаемся на li
    var ulPar=cur.parentNode;        // ссылаемся на ul
    for (var i=0; i<ulPar.childNodes.length; i++)
    document.getElementById("pt"+i).style.display=(("pt"+i)==showblock) ? '' : "none";    
 }

kirosin · 18.06.2010, 15:42

неа, чото ваще не раскрывается...
может я неправильно применил?

Код:

<head>
<script>
 function show(athis,showblock){
    var cur=athis.parentNode;  // ссылаемся на li
    var ulPar=cur.parentNode;        // ссылаемся на ul
    for (var i=0; i<ulPar.childNodes.length; i++)
    document.getElementById("pt"+i).style.display=(("pt"+i)==showblock) ? '' : "none";    
 }
</script>
</head>
<body>
<ul>
<li><a href="" onclick="show(this,"pt0") return false;">Пункт 1</a>
<p id="pt0" style="display: none;">Текст 1</p>
</li>
<li><a href="" onclick="show(this,"pt1") return false;">Пункт 2</a>
<p id="pt1" style="display: none;">Текст 2</p>
</li>
<li><a href="" onclick="show(this,"pt2") return false;">Пункт 3</a>
<p id="pt2" style="display: none;">Текст 3</p>
</li>
</ul>
</body>

Johnatan · 18.06.2010, 21:17

Во-первых, в ссылках типа <a href="" onclick="show(this,"pt0") return false;">Пункт 1</a> у тебя pt0 заключено в двойные кавычки, в двойные же кавычки у тебя заключён атрибут onclick, что приводит к конфликту. Замени двойные кавычки на одинарные, например вокруг pt0, pt1 и т.д.

Во-вторых, после show(this, 'pt0') должны идти точка с запятой.

В-третьих, не забываем, что текст между тегами <ul> и <li>, а также между </li> и <li> (я не ошибся в порядке тегов) тоже является текстовым элементом (child) внутри <ul>. Перенос строки является текстом. Это значит что при переносе строки будет создаваться новый child у элемента <ul>, а это значит перебором детей, как это реализовал ты, не получится проконтролировать все <li>
Такой код должен работать (не проверял, на коленке писал):

Код:

<ul><li><a href="" onclick="show(this,'pt0'); return false;">Пункт 1</a>
15<p id="pt0" style="display: none;">Текст 1</p>
16</li><li><a href="" onclick="show(this,'pt1'); return false;">Пункт 2</a>
17<p id="pt1" style="display: none;">Текст 2</p>
18</li><li><a href="" onclick="show(this,'pt2'); return false;">Пункт 3</a>
19<p id="pt2" style="display: none;">Текст 3</p>
20</li></ul>

kirosin · 19.06.2010, 18:05

да, так работает )) всем спасибо! )

18.06.2010, 01:28	#1
kirosin Форумчанин Регистрация: 15.01.2010 Сообщений: 209	Раскрывающееся меню Код: <head> <script type="text/javascript"> function displ(ddd) { if (document.getElementById(ddd).style.display == 'none') {document.getElementById(ddd).style.display = 'block'} else {document.getElementById(ddd).style.display = 'none'} } </script> </head> <body> <ul> <li><a href="javascript: displ('pt1')">Пункт 1</a> <p id="pt1" style="display: none;">Текст 1</p> </li> <li><a href="javascript: displ('pt2')">Пункт 2</a> <p id="pt2" style="display: none;">Текст 2</p> </li> <li><a href="javascript: displ('pt3')">Пункт 3</a> <p id="pt3" style="display: none;">Текст 3</p> </li> </ul> </body> есть вот такой код, кликаешь по пункту - появляется текст, кликаешь второй раз - он исчезает. Как сделать так, чтобы при клике на пункт он открывался, а если есть еще открытые пункты, чтоб они закрывались? То есть единовременно должен быть открыт только один из пунктов. Все генитальное просто.

18.06.2010, 21:17	#4
Johnatan Antimoderаtoris Участник клуба Регистрация: 08.02.2008 Сообщений: 1,251	Во-первых, в ссылках типа <a href="" onclick="show(this,"pt0") return false;">Пункт 1</a> у тебя pt0 заключено в двойные кавычки, в двойные же кавычки у тебя заключён атрибут onclick, что приводит к конфликту. Замени двойные кавычки на одинарные, например вокруг pt0, pt1 и т.д. Во-вторых, после show(this, 'pt0') должны идти точка с запятой. В-третьих, не забываем, что текст между тегами <ul> и <li>, а также между </li> и <li> (я не ошибся в порядке тегов) тоже является текстовым элементом (child) внутри <ul>. Перенос строки является текстом. Это значит что при переносе строки будет создаваться новый child у элемента <ul>, а это значит перебором детей, как это реализовал ты, не получится проконтролировать все <li> Такой код должен работать (не проверял, на коленке писал): Код: `<ul><li><a href="" onclick="show(this,'pt0'); return false;">Пункт 1</a> 15<p id="pt0" style="display: none;">Текст 1</p> 16</li><li><a href="" onclick="show(this,'pt1'); return false;">Пункт 2</a> 17<p id="pt1" style="display: none;">Текст 2</p> 18</li><li><a href="" onclick="show(this,'pt2'); return false;">Пункт 3</a> 19<p id="pt2" style="display: none;">Текст 3</p> 20</li></ul>` 98% из тысячи моих постов сделаны в профильном подфоруме. Я не накручиваю свои посты болтанием в "курилке", а ты?

19.06.2010, 18:05	#5
kirosin Форумчанин Регистрация: 15.01.2010 Сообщений: 209	да, так работает )) всем спасибо! ) Все генитальное просто.

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
переделать всплывающее меню в раскрывающееся на JavaScript	netweb	JavaScript, Ajax	0	15.01.2010 09:36
переробить всплывающее меню в раскрывающееся на JavaScript	netweb	JavaScript, Ajax	3	14.01.2010 14:20
переробить всплывающее меню в раскрывающееся на JavaScript	netweb	Помощь студентам	5	13.01.2010 21:12
Меню с Items в виде набора Bitmap (как меню редактирования в Word'е)	chandrasecar	Мультимедиа в Delphi	7	14.01.2009 09:20
раскрывающееся панелька	Polotenchik	Общие вопросы по Java, Java SE, Kotlin	1	12.01.2009 23:57