如何使子下拉菜单显示为默认（折叠）结构

Question

I have a drop down list with multi drop downs, which opens and closes on alternative clicks but when I try to reopen the drop down the entire drops appear without closing. How can i make it appear on default structure. please help guys. Thanks in advance

<style>
.closed{display:none;}
.opened{display:block;}
</style>
<div class="dropdown">
<p class=" dropdown-toggle" type="" data-toggle="dropdown" 
style="padding: 15px 0px;font-size: 24px;"><i class="fas fa-bars">
</i>&nbsp;CATEGORY</p>
<ul class="dropdown-menu">
    <li class="dropdown-submenu">
        <a class="test" tabindex="-1" href="#">New dropdown <span class="caret"></span></a>
        <ul class="dropdown-menu opened">
            <li><a tabindex="-1" href="#">2nd level dropdown</a></li>
            <li><a tabindex="-1" href="#">2nd level dropdown</a></li>
            <li class="dropdown-submenu">
                <a class="test" href="#">Another dropdown <span class="caret"></span></a>
                <ul class="dropdown-menu opened">
                    <li><a href="#">3rd level dropdown</a></li>
                    <li><a href="#">3rd level dropdown</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li><a tabindex="-1" href="#">HTML</a></li>
    <li><a tabindex="-1" href="#">CSS</a></li>
    <li class="dropdown-submenu">
        <a class="test" tabindex="-1" href="#">New dropdown <span class="caret"></span></a>
        <ul class="dropdown-menu closed">
            <li><a tabindex="-1" href="#">2nd level dropdown</a></li>
            <li><a tabindex="-1" href="#">2nd level dropdown</a></li>
            <li class="dropdown-submenu">
                <a class="test" href="#">Another dropdown <span class="caret"></span></a>
                <ul class="dropdown-menu closed">
                    <li><a href="#">3rd level dropdown</a></li>
                    <li><a href="#">3rd level dropdown</a></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>
</div>

<script>
//new drop ends
$(function(){
$('.dropdown-submenu a.test').on("click", function(e){                  
    var ul = $(this).next('ul');
    if(ul.hasClass('opened')){
        ul.removeClass('opened').addClass('closed');
    }else{
        ul.addClass('opened').removeClass('closed');
    }
    if($(this).parents('ul').length == 1){
        $(this).parents('ul').find('ul').not(ul).addClass('closed').removeClass('opened')
    }

    e.stopPropagation();
    e.preventDefault();

});        
});  
  </script>

Answer 1

When you click the modified classes are:

The answer, remove "opened" class in dropdown-menus.

        <ul class="dropdown-menu ">
            <li>
                <a tabindex="-1" href="#">2nd level dropdown</a>
            </li>
            <li>
                <a tabindex="-1" href="#">2nd level dropdown</a>
            </li>
            <li class="dropdown-submenu">
                <a class="test" href="#">Another dropdown
                    <span class="caret"></span>
                </a>
                <ul class="dropdown-menu ">
                    <li>
                        <a href="#">3rd level dropdown</a>
                    </li>
                    <li>
                        <a href="#">3rd level dropdown</a>
                    </li>
                </ul>
            </li>
        </ul>

Replace jQuery code for:

    $('.dropdown').on('hidden.bs.dropdown', function () {
        $('.dropdown-submenu a.test').each(function () {
            var ul = $(this).next('ul');
            if (ul.hasClass('opened')) {
                ul.removeClass('opened').addClass('closed');
            } else {
                ul.addClass('opened').removeClass('closed');
            }
            if ($(this).parents('ul').length) {
                $(this).parents('ul').find('ul').not(ul).addClass('closed').removeClass('opened')
            }
            e.stopPropagation();
            e.preventDefault();
        });
    });