Javascript-форум - Изменение фона элемента при клике.

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

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Изменение фона элемента при клике. (https://javascript.ru/forum/dom-window/29326-izmenenie-fona-ehlementa-pri-klike.html)

Изменение фона элемента при клике.

Всем здрасте.
Помогите плиз реализовать задумку.
Просто средствами сss не получаеться.
Собственно вот -
есть меню.
При клике на пункт меню ,он раскрываеться и выпадают подпункты.
При клике щераз оно закрываеться.
Это сделанно с помщью функции на java.
Так вот мне надо добавить еще один эфект к этому делу.
Чтобы при клике и раскрытии меню, менялась картинка заднего фона <li> menu 1 , так же у него чтобы убирался маркер списка ( но только у него).
При поворном клике пункт <li> menu1 закрывался и возвращался в первоначальное состояние. ( становилась бэграунд картинка прежняя и маркер на месте ).
вот есть код -

<html>

<head>
<link href="styles/catalog.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" language="javascript">

function allClose(){
var list = document.getElementById("menu_catalog").getElement sByTagName("ul");
for(var i=0;i<list.length;i++){
list[i].style.display = "none";
}
}
function openMenu(node){
var subMenu = node.parentNode.getElementsByTagName("ul")[0];
subMenu.style.display == "none" ? subMenu.style.display = "block" : subMenu.style.display = "none";
}
</script>
<styles>
#menu_catalog {
background:#81A192;
width:200px;
list-style-image: url(../img/rect_orange.jpg);
padding:0;
margin:0;
font-size: 10pt;
}
#menu_catalog li {
padding:3px;
margin-left: 20px;
}
#menu_catalog li a{
color:#fff;
font-family:verdana,arial,sans-serif;
text-decoration:none;
list-style-type:none;
display: block;
}
.sub_catalog {
padding:0;
margin:0;
list-style-image:none;
margin-left: 5px;
}
.sub_catalog li{
border:0;
color:#fff;
list-style-image: url(../img/catalog_dot.jpg);
margin-left: 15px;
}
</styles>
</head>
<body onload="allClose()">

<ul id="menu_catalog">
<li><a href="#" onclick="openMenu(this);return false">Menu 1</a>
<ul class="sub_catalog" >
<li><a href="#">sub menu 1</a></li>
<li><a href="#">sub menu 2</a></li>
<li><a href="#">sub menu 3</a></li>
<li><a href="#">sub menu 4</a></li>
<li><a href="#">sub menu 5</a></li>
<li><a href="#">sub menu 6</a></li>
<li><a href="#">sub menu 7</a></li>
</ul>
</li>
<li ><a href="#" onclick="openMenu(this);return false" >Menu 2</a>
<ul class="sub_catalog" >
<li><a href="#">sub menu 1</a></li>
<li><a href="#">sub menu 2</a></li>
<li><a href="#">sub menu 3</a></li>
<li><a href="#">sub menu 4</a></li>
<li><a href="#">sub menu 5</a></li>
<li><a href="#">sub menu 6</a></li>
<li><a href="#">sub menu 7</a></li>
</ul>
</li>
<li ><a href="#" onclick="openMenu(this);return false" >Menu 3</a>
<ul class="sub_catalog" >
<li><a href="#">sub menu 1</a></li>
<li><a href="#">sub menu 2</a></li>
<li><a href="#">sub menu 3</a></li>
<li><a href="#">sub menu 4</a></li>
<li><a href="#">sub menu 5</a></li>
<li><a href="#">sub menu 6</a></li>
<li><a href="#">sub menu 7</a></li>
</ul>
</li>
</ul>
</body>
</html>
Спасибо!

psydo,
Вот это решение - не подойдет ? => http://javascript.ru/forum/dom-windo...vigacii-3.html

хммм немного не то ... мне собственно надо чтобы при раскрытии поменялся бэкграунд у элемента который раскрылся (который являеться родителем)... тот что в предложенном примере являеться категория1. При нажатии и закрытии надо чтобы всё возвращалось как было. Здесь в этом примере цвет у внутренних пунктов меняеться а не у родительского .

Цитата:

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

Здесь в этом примере цвет у внутренних пунктов меняеться а не у родительского .

Если в общем подходит - то поменять достатчно просто - потыкайте и изобразите эскизы скрытого и раскрытого

К сожалению даже в общем не подходит. Вся соль моей проблемы в том чтобы мне нужно изменять бэкграунд и убрать маркер элемента на который произведено нажатие , и возвращение в первоначальное состояние после повторного нажатия. тут после нажатия на элемент его внешний вид не меняеться. происходит тоько раскрытие списка.

Цитата:

Сообщение от psydo (Сообщение 183570)

элементарно...если вы знаете, что такое parentNode, то данная задача не должна была вызвать у вас трудностей...

function openMenu(node){
	var subMenu = node.parentNode.getElementsByTagName("ul")[0];
	subMenu.style.display == "none" ? (subMenu.style.display = "block", node.style.background = "black", node.parentNode.style.listStyleType = "none") : (subMenu.style.display = "none", node.style.background = "#81A192", node.parentNode.style.listStyleType = "disc");
}

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Вопросы</title>
<script type="text/javascript" src="http://yandex.st/jquery/1.4.4/jquery.min.js"></script>

</head>
<body>


 <link href="styles/catalog.css" rel="stylesheet" type="text/css" />
 <style>
 #menu_catalog {
 background:#81A192;
 width:200px;
 list-style-image: url(../img/rect_orange.jpg); 
 padding:0;
 margin:0;
 font-size: 10pt;
 }
 #menu_catalog li {
 padding:3px;
 margin-left: 20px;

 }
 #menu_catalog li a{
 color:#000;
 font-family:verdana,arial,sans-serif;
 text-decoration:none;
 list-style-type:none;
 display: block;
 }

 .sub_catalog {
 padding:0;
 margin:0;
 list-style-image:none;
 margin-left: 5px;
 }
 .sub_catalog{
  display:none;
}
 #menu_catalog li.ShoW{
 list-style-type:none;
 background-color:#A2BFD8;
 margin-bottom:2px;
}
 .sub_catalog li{
 border:0;
 color:#fff;
 list-style-image: url(../img/catalog_dot.jpg);
 margin-left: 15px;
 }
 </style>
 </head>

 <body>

 <ul id="menu_catalog">
 <li><a href="#">Menu 1</a>
 <ul class="sub_catalog" >
 <li><a href="#">sub menu 1</a></li>
 <li><a href="#">sub menu 2</a></li>
 <li><a href="#">sub menu 3</a></li>
 <li><a href="#">sub menu 4</a></li>
 <li><a href="#">sub menu 5</a></li>
 <li><a href="#">sub menu 6</a></li>
 <li><a href="#">sub menu 7</a></li>
 </ul>
 </li>
 <li ><a href="#">Menu 2</a>
 <ul class="sub_catalog" >
 <li><a href="#">sub menu 1</a></li>
 <li><a href="#">sub menu 2</a></li>
 <li><a href="#">sub menu 3</a></li>
 <li><a href="#">sub menu 4</a></li>
 <li><a href="#">sub menu 5</a></li>
 <li><a href="#">sub menu 6</a></li>
 <li><a href="#">sub menu 7</a></li>
 </ul>
 </li>
 <li ><a href="#">Menu 3</a>
 <ul class="sub_catalog" >
 <li><a href="#">sub menu 1</a></li>
 <li><a href="#">sub menu 2</a></li>
 <li><a href="#">sub menu 3</a></li>
 <li><a href="#">sub menu 4</a></li>
 <li><a href="#">sub menu 5</a></li>
 <li><a href="#">sub menu 6</a></li>
 <li><a href="#">sub menu 7</a></li>
 </ul>
 </li>
 </ul>
<script>
   $(".sub_catalog").parent('li').find("a:first").click(function () {
	var ULcng = $(this).next()
	ULcng.parent('li').toggleClass('ShoW')
	ULcng.toggle('slow')
     return false;
   });
</script>



 </body>
 </html>

Спасибо огромное... То что нужно!

А подскажите еще такую вещь, как сделать чтобы это меню при нажатии на ссылку в menu 1 перекидывало на страницу и уже на этой странице подпункты sub menu 1 ,2,3 итд были в развернутом виде???