Форум Сайтостроение Веб-строительство

Как можно каждую подкатегорию в дереве обернуть в див?

M2
На сайте с 11.01.2011
Offline
341
mark2011
689

Добрый день!

Вопрос, может быть, и простой, но я уже сломал мозг...

Имеем такую структуру:

--Category 1

---Subcategory 11

---Subcategory 21

---Subcategory 31

---Subcategory 41

--Category 2

---Subcategory 12

---Subcategory 22

--Category 3

--Category 4

По нажатию на категории должны показываться/скрываться подкатегории. Кроме как обернуть их в див я больше не нашёл выхода. Но див в рекурсии - это полный гемор...

Вот HTML который у меня на выходе сейчас: 


<ul id="right_menu">

		<li class="main_menu_on"><span class="clr"><a href="#" onClick="test_alert(90); return false;">DVD</a></span></li><div><li><span class="submenu"><a href="test.php?id=99347248">*Music</a></span><li><span class="submenu"><a href="test.php?id=99347319">*RUS</a></span><li><span class="submenu"><a href="test.php?id=99347320">*Зарубежные</a></span><li><span class="submenu"><a href="test.php?id=99347247">*Индия</a></span><li><span class="submenu"><a href="test.php?id=99347341">*Мультфильмы</a></span><li><span class="submenu"><a href="test.php?id=99347235">*Раскраски</a></span><li><span class="submenu"><a href="test.php?id=99344734">*Распродажа</a></span><li><span class="submenu"><a href="test.php?id=99347317">*ТВ</a></span><li><span class="submenu"><a href="test.php?id=99347240">*Эротика</a></span><li class="main_menu_on"><span class="clr"><a href="#" onClick="test_alert(91); return false;">FUN Plastic</a></span></li><div><li><span class="submenu"><a href="test.php?id=222222">test2011</a></span><li class="main_menu_on"><span class="clr"><a href="#" onClick="test_alert(7239); return false;">MP3</a></span></li><div><li class="main_menu_on"><span class="clr"><a href="#" onClick="test_alert(3830); return false;">Игры</a></span></li><div><li class="main_menu_on"><span class="clr"><a href="#" onClick="test_alert(92); return false;">Игры</a></span></li><div><li class="main_menu_on"><span class="clr"><a href="#" onClick="test_alert(93); return false;">Прочие</a></span></li><div><li class="main_menu_on"><span class="clr"><a href="#" onClick="test_alert(94); return false;">Раскраски</a></span></li><div><li class="main_menu_on"><span class="clr"><a href="#" onClick="test_alert(95); return false;">Фигурки</a></span></li><div><li class="main_menu_on"><span class="clr"><a href="#" onClick="test_alert(96); return false;">Чистый склад</a></span></li><div>



	</ul>

Всё, что начинается со звёздочки - это подкатегории, которые необходимо разом скрывать или показывать. Грубо говоря, нужно каждый блока подкатегорий обернуть в div с каким-то id... вот, собственно, и всё... дальше уже игра css - дело техники :)

Как сие реализовать?

------------------- Крутые VPS и дедики. Качество по разумной цене ( http://cp.inferno.name/view.php?product=1212&gid=1 ) VPS25OFF - скидка 25% на первый платеж по ссылке выше
Olldman
На сайте с 21.04.2010
Offline
79
Olldman
#1

Так, не? :http://realtsib.ru/oldman/2/menu.html

gormarket
На сайте с 29.12.2010
Offline
47
gormarket
#2

Можно обойтись и без дивов в дереве категорий, только "li" с разными классами


<ul>
 <li></li>
 <li></li>
...
 <li></li>
</ul>

и с помощью jQuery показывать-прятать нужные элементы списка

Например для приведенного Вами кода будет работать следующее (только уберите из кода незакрытые дивы, они не нужны)


$(".main_menu_on a").attr("onclick", "return false;");
$(".main_menu_on a").unbind().click(function() {$(this).parent().parent().click();return false;});
$(".submenu").parent().css("display","none");
function show_submenu(menu){
	var next;var d;
	while (true) {  
		next=$(menu).next();
		if($(next).children("span").attr("class")=="submenu"){
			d=$(next).css("display")=="none"?"block":"none";
			$(next).css("display",d);
			menu=next;
		}else{
			return;
		}
	} 
}
$(".main_menu_on").unbind().click(function() {show_submenu(this)});
Товары и цены в магазинах Вашего города: Городской рынок (http://gormarket.ru/)

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий