Извините, но я не такой умный

Question

Я пытаюсь сделать аккордеонное меню из списка html с помощью jquery, но не могу заставить его работать, я знаю, что это не что-то сумасшедшее, но мне нужна помощь, у некоторых есть, но моя главная проблема в том, что мне удалось чтобы сделать что-то вроде работы, но когда я свернул подменю, была проблема с пробелами и высотой, еще раз извините за мой ужасный код, любой совет / рефакторинг приветствуется

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

здесь html

<ul class="product-categories"><li class="cat-item cat-item-40 cat-parent is_closed" style="overflow: hidden; height: 40px;"><a href="#">Body area<a href="http://localhost/sintesi/product-category/body-area/"><i class="menu-arrow fas fa-arrow-circle-right" aria-hidden="true"></i></a></a><ul class="children">
<li class="cat-item cat-item-54"><a href="http://localhost/sintesi/product-category/body-area/firming-antistretchmark/">firming/antistretchmark</a></li>
<li class="cat-item cat-item-63"><a href="http://localhost/sintesi/product-category/body-area/functional-massage/">Functional massage</a></li>
<li class="cat-item cat-item-62"><a href="http://localhost/sintesi/product-category/body-area/lypolytic-reshaping/">lypolytic/reshaping</a></li>
<li class="cat-item cat-item-61"><a href="http://localhost/sintesi/product-category/body-area/total-body-slimming-shaping/">Total body slimming/shaping</a></li>
</ul>
</li>
<li class="cat-item cat-item-68 cat-parent is_closed" style="overflow: hidden; height: 40px;"><a href="#">Face &amp; Body area<a href="http://localhost/sintesi/product-category/face-body-area/"><i class="menu-arrow fas fa-arrow-circle-right" aria-hidden="true"></i></a></a><ul class="children">
<li class="cat-item cat-item-69"><a href="http://localhost/sintesi/product-category/face-body-area/basic-products-face-body-area/">Basic products</a></li>
<li class="cat-item cat-item-72"><a href="http://localhost/sintesi/product-category/face-body-area/hands-feet/">Hands &amp; Feet</a></li>
<li class="cat-item cat-item-74"><a href="http://localhost/sintesi/product-category/face-body-area/sunscreens/">Sunscreens</a></li>
<li class="cat-item cat-item-73"><a href="http://localhost/sintesi/product-category/face-body-area/wax/">Wax</a></li>
</ul>
</li>
<li class="cat-item cat-item-30 cat-parent is_closed" style="overflow: hidden; height: 40px;"><a href="#">Face area<a href="http://localhost/sintesi/product-category/face-area/"><i class="menu-arrow fas fa-arrow-circle-right" aria-hidden="true"></i></a></a><ul class="children">
<li class="cat-item cat-item-41"><a href="http://localhost/sintesi/product-category/face-area/anti-age-products/">Anti-age products</a></li>
<li class="cat-item cat-item-31"><a href="http://localhost/sintesi/product-category/face-area/basic-products/">Basic products</a></li>
<li class="cat-item cat-item-51"><a href="http://localhost/sintesi/product-category/face-area/gift-boxes/">Gift Boxes</a></li>
<li class="cat-item cat-item-47"><a href="http://localhost/sintesi/product-category/face-area/specific-blemishes-problems/">Specific blemishes problems</a></li>
</ul>
</li>
<li class="cat-item cat-item-36 current-cat cat-parent is_closed" style="overflow: hidden; height: 180px;"><a href="#">Home<a href="http://localhost/sintesi/product-category/home/"><i class="menu-arrow fas fa-arrow-circle-right" aria-hidden="true"></i></a></a><ul class="children">
<li class="cat-item cat-item-58 cat-parent is_closed" style="overflow: hidden; height: 60px;"><a href="#">Home Body Area<a href="http://localhost/sintesi/product-category/home/home-body-area/"><i class="menu-arrow fas fa-arrow-circle-right" aria-hidden="true"></i></a></a>    <ul class="children">
<li class="cat-item cat-item-59"><a href="http://localhost/sintesi/product-category/home/home-body-area/home-body-firming-and-antistretchmark/">Home Body Firming and Antistretchmark</a></li>
<li class="cat-item cat-item-66"><a href="http://localhost/sintesi/product-category/home/home-body-area/home-body-functional-massage/">Home Body Functional Massage</a></li>
    </ul>
</li>
<li class="cat-item cat-item-37 cat-parent is_closed" style="overflow: hidden; height: 40px;"><a href="#">Home Face Area<a href="http://localhost/sintesi/product-category/home/home-face-area/"><i class="menu-arrow fas fa-arrow-circle-right" aria-hidden="true"></i></a></a>    <ul class="children">
<li class="cat-item cat-item-44"><a href="http://localhost/sintesi/product-category/home/home-face-area/home-face-anti-age/">Home Face Anti-age</a></li>
<li class="cat-item cat-item-38"><a href="http://localhost/sintesi/product-category/home/home-face-area/home-face-basic/">Home Face Basic</a></li>
<li class="cat-item cat-item-52"><a href="http://localhost/sintesi/product-category/home/home-face-area/home-face-gift-boxes/">Home Face Gift Boxes</a></li>
<li class="cat-item cat-item-49"><a href="http://localhost/sintesi/product-category/home/home-face-area/home-face-specific-blemishes-problems/">Home Face Specific Blemishes Problems</a></li>
    </ul>
</li>
</ul>
</li>
<li class="cat-item cat-item-24 cat-parent is_closed" style="overflow: hidden; height: 40px;"><a href="#">Products<a href="http://localhost/sintesi/product-category/products/"><i class="menu-arrow fas fa-arrow-circle-right" aria-hidden="true"></i></a></a><ul class="children">
<li class="cat-item cat-item-27"><a href="http://localhost/sintesi/product-category/products/pollog/">pollog</a></li>
<li class="cat-item cat-item-28 cat-parent is_closed" style="overflow: hidden; height: 40px;"><a href="#">testa<a href="http://localhost/sintesi/product-category/products/testa/"><i class="menu-arrow fas fa-arrow-circle-right" aria-hidden="true"></i></a></a>  <ul class="children">
<li class="cat-item cat-item-29"><a href="http://localhost/sintesi/product-category/products/testa/testo/">testo</a></li>
    </ul>
</li>
</ul>
</li>
<li class="cat-item cat-item-32 cat-parent is_closed" style="overflow: hidden; height: 40px;"><a href="#">Technical<a href="http://localhost/sintesi/product-category/technical/"><i class="menu-arrow fas fa-arrow-circle-right" aria-hidden="true"></i></a></a><ul class="children">
<li class="cat-item cat-item-55 cat-parent is_closed" style="overflow: hidden; height: 40px;"><a href="#">Professional Body Area<a href="http://localhost/sintesi/product-category/technical/professional-body-area/"><i class="menu-arrow fas fa-arrow-circle-right" aria-hidden="true"></i></a></a>   <ul class="children">
<li class="cat-item cat-item-70"><a href="http://localhost/sintesi/product-category/technical/professional-body-area/professional-body-basic/">Professional Body Basic</a></li>
<li class="cat-item cat-item-56"><a href="http://localhost/sintesi/product-category/technical/professional-body-area/professional-body-firming-and-antistretchmark/">Professional Body Firming and Antistretchmark</a></li>
<li class="cat-item cat-item-64"><a href="http://localhost/sintesi/product-category/technical/professional-body-area/professional-body-functional-massage/">Professional Body Functional Massage</a></li>
    </ul>
</li>
<li class="cat-item cat-item-33 cat-parent is_closed" style="overflow: hidden; height: 40px;"><a href="#">Professional Face Area<a href="http://localhost/sintesi/product-category/technical/professional-face-area/"><i class="menu-arrow fas fa-arrow-circle-right" aria-hidden="true"></i></a></a>   <ul class="children">
<li class="cat-item cat-item-42"><a href="http://localhost/sintesi/product-category/technical/professional-face-area/professional-face-anti-age/">Professional Face Anti-age</a></li>
<li class="cat-item cat-item-34"><a href="http://localhost/sintesi/product-category/technical/professional-face-area/professional-face-basic/">Professional Face Basic</a></li>
<li class="cat-item cat-item-46"><a href="http://localhost/sintesi/product-category/technical/professional-face-area/professional-face-specific-blemishes-problem/">Professional Face Specific Blemishes Problem</a></li>
    </ul>
</li>
</ul>
</li>
<li class="cat-item cat-item-25 cat-parent is_closed" style="overflow: hidden; height: 40px;"><a href="#">Treatments<a href="http://localhost/sintesi/product-category/treatments/"><i class="menu-arrow fas fa-arrow-circle-right" aria-hidden="true"></i></a></a><ul class="children">
<li class="cat-item cat-item-76"><a href="http://localhost/sintesi/product-category/treatments/body/">body</a></li>
<li class="cat-item cat-item-75"><a href="http://localhost/sintesi/product-category/treatments/face/">face</a></li>
<li class="cat-item cat-item-26"><a href="http://localhost/sintesi/product-category/treatments/mass/">mass</a></li>
</ul>
</li>
<li class="cat-item cat-item-20"><a href="http://localhost/sintesi/product-category/uncategorised/">Uncategorised</a></li>
</ul>

здесь javascript:

        $(document).ready(function(){

var old_height= $(this).find('ul').parent().height();
            var old_link =  $(this).children('a').attr("href");

            if($(this).hasClass("cat-parent")){
                $(this).height(40);
                $(this).children('a').append("<a href='"+old_link+"'><i class='menu-arrow fas fa-arrow-circle-right'></i></a>");
                $(this).addClass('is_closed');}
   $(this).children('a').attr("href","#").click(function(){
                console.log($(this).parent().find('ul').children().length);
                console.log($(this).parent().find('.is_closed').length);

                if($(this).parent().hasClass('is_closed') && $(this).parent().children().find('.is_closed')){
                        console.log("wtf");      
                    var height = $(this).parent().find('.is_closed').length * 60+60;                    
                }else{

                    var height = $(this).parent().find('ul').children().length * 60+60;
                    console.log(height);    
                }




                $(this).parent().animate({height},200);    })

        })
   });
</script>