Как сделать хорошее многоуровневое меню?

Question

booogabooo @booogabooo

Как сделать хорошее многоуровневое меню?

Доброго времени суток. Из-за моего неудачного знания js, столкнулся с такой вот проблемой.
Мне нужно сделать нормальное выпадающее многоуровневое меню.
Структуру я дам ниже:

<?if (!empty($arResult)):?>
<div class="nv_topnav">
<ul class="b-menu__dropdown">

<?
$previousLevel = 0;
foreach($arResult as $arItem):?>
	
	<?
		if($arItem["DEPTH_LEVEL"] == 1) continue;
	?>


	<?if ($previousLevel && $arItem["DEPTH_LEVEL"] < $previousLevel):?>
		<?=str_repeat("</ul></li>", ($previousLevel - $arItem["DEPTH_LEVEL"]));?>
	<?endif?>

	<?if ($arItem["IS_PARENT"]):?>

		<?if ($arItem["DEPTH_LEVEL"] == 1):?>
			<li><a href="<?=$arItem["LINK"]?>" <?if(isset($arItem['PARAMS']['IMG'])):?>class="menu-img-fon" style="background-image: url(<?=$arItem['PARAMS']['IMG']?>);"<?endif?>><span><?=$arItem["TEXT"]?></span></a>
				<ul>
		<?else:?>
			<li class="b-menu__item level<?=$arItem["DEPTH_LEVEL"]?>"><a href="<?=$arItem["LINK"]?>"><?=$arItem["TEXT"]?></a><b class="caret"></b>
				<ul class="">
		<?endif?>

	<?else:?>

		<?if ($arItem["PERMISSION"] > "D"):?>

			<?if ($arItem["DEPTH_LEVEL"] == 1):?>
				<li><a href="<?=$arItem["LINK"]?>" <?if(isset($arItem['PARAMS']['IMG'])):?>class="menu-img-fon" style="background-image: url(<?=$arItem['PARAMS']['IMG']?>);"<?endif?>><span><?=$arItem["TEXT"]?></span></a></li>
			<?else:?>
				<li class="b-menu__item level<?=$arItem["DEPTH_LEVEL"]?>"><a href="<?=$arItem["LINK"]?>"><?=$arItem["TEXT"]?></a></li>
			<?endif?>

		<?endif?>

	<?endif?>

	<?$previousLevel = $arItem["DEPTH_LEVEL"];?>

<?endforeach?>

<?if ($previousLevel > 1)://close last item tags?>
	<?=str_repeat("</ul></li>", ($previousLevel-1) );?>
<?endif?>
<div class="clearboth"></div>
</ul>
</div>
<?endif?>

А вот, что я нагородил:

<script type="text/javascript">
	$(document).ready(function(){
		$(".level2").click(function(){
			$(this).slideToggle('slow');
		})
	});
</script>
<script type="text/javascript">
	$(document).on('click', '.level3', function(e) {
    /*e.preventDefault();*/
    /*console.log(e.target);
    console.log(this);
    alert('Вы кликнули по ссылке с классом ' + this.className);*/
    $(this).find('a').toggleClass('greyColor');
    $(this).find('b.caret').toggleClass('rotate open');
    $(this).find("ul li").slideToggle('slow').find("a").toggleClass('greenColor');
});
</script>
<script type="text/javascript">
	$(document).on('click', '.level4', function(e) {
    /*e.preventDefault();*/
    /*console.log(e.target);
    console.log(this);
    alert('Вы кликнули по ссылке с классом ' + this.className);*/
    $(this).find('a').toggleClass('greyColor');
    $(this).find('b.caret').toggleClass('rotate open');
    $(this).find("ul li").slideToggle('slow').find("a").toggleClass('greenColor');
});
</script>

<script type="text/javascript">
	$(function () {
		$(".b-not, .level3, .level4").hide();
	  $(".nv_topnav ul > li.level2").click(function(e){
	  	
	    $(this).find("li.level3").show("slow");
	    


	  });

	  $(".level4").find(".caret").hide();
	  $(".level3").click(function(e){
		  	/*e.preventDefault();*/
		  	$(this).find("level3 ul > li").slideToggle('slow');
		  });
	  
	  $('.nv_topnav ul li > a').click(function(){                                               
	  	$(this).parent().find('li').slideToggle('middle');
      });
 	  /*$(".nv_topnav ul li").click(function(e){
 	  	(this).next("ul li").siblings(".b-menu__item").removeClass("b-menu__item").addClass("b-menu__dropdown");
 	  }*/

	});

</script>

То, что это ужас, я и так знаю...
Но мне нужно решить задачу совершенно не меняя структуру и не дописывая новых классов

Т.е вот как оно работает: появляется меня с пунктами 1 уровня. На нажатие одного - появляется второй уровень. При повторном нажатии скрыть второй уровень. Уровни вложенности - 4