How to make a good multi-level menu?

Question

css

Good day. Due to my poor knowledge of js, I ran into such a problem.
I need to make a normal dropdown multilevel menu.
I will give the structure below:

<?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?>

And here is what I rewarded:

<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>

I already know that this is terrible ...
But I need to solve the problem without changing the structure at all and without adding new classes

. That is, this is how it works: I appear with level 1 items. On pressing one - the second level appears. When pressed again, hide the second level. Nesting levels - 4

Answer 1

I would advise you to use a ready-made solution. For example http://pcvector.net/scripts/accordion/445-vertkal...