制作可折叠的菜单

Question

这是我的旁边菜单（html代码）。问题是我不知道如何使其可折叠。当我点击子菜单时，其他子菜单应该关闭。

        <nav class="right-nav"> <!-- Remove id and add class -->
            <ul>
                <li><a href="index.html">Home <span class="number_counter">100</span></a></li>
                <li class="opener" id='rec-menu'>
                    <span class="drop_down_menu">Dropdown <span class="number_counter">100</span></span>
                  <ul class="sub-menu">
                        <li><a href="#">Lorem ipsum dolor <span class="number_counter">100</span></a></li>
                        <li><a href="#">Magna phasellus <span class="number_counter">100</span></a></li>
                        <li><a href="#">Etiam dolore nisl <span class="number_counter">100</span></a></li>
                        <li>
                            <span class="drop_down_menu">Phasellus consequat <span class="number_counter">100</span></span>
                            <ul class="sub-menu">
                                <li><a href="#">Lorem ipsum dolor <span class="number_counter">100</span></a></li>
                                <li><a href="#">Phasellus consequat <span class="number_counter">100</span></a></li>
                                <li><a href="#">Magna phasellus <span class="number_counter">100</span></a></li>
                                <li><a href="#">Etiam dolore nisl <span class="number_counter">100</span></a></li>
                                <li class="current_page_item"><a href="#">Veroeros feugiat <span class="number_counter">100</span></a></li>
                            </ul>
                        </li>
                        <li><a href="#">Veroeros feugiat <span class="number_counter">100</span></a></li>
                    </ul>
                </li>
              <li><a href="left-sidebar.html">Left Sidebar <span class="number_counter">100</span></a></li>
              <li><a href="right-sidebar.html">Right Sidebar <span class="number_counter">100</span></a></li>
              <li><a href="two-sidebar.html">Two Sidebar <span class="number_counter">100</span></a></li>
                <li><a href="no-sidebar.html">No Sidebar <span class="number_counter">100</span></a></li>
            </ul>
        </nav>

这是我正在使用的javascript。

$(function () {
                $('.opener .sub-menu').hide(); //Hide children by default
                $('.opener span').click(function (event) {
                    event.preventDefault();
                    $(this).toggleClass('open_menu');
                    $(this).siblings('.sub-menu').slideToggle('slow');
                });

                $('.toggle_nav').click(function (event) {
                    $('.right-nav').slideToggle('slow');
                });
            });// JavaScript Document


$("html, body").animate({
            scrollTop: 0
}, 600);

$(window).on('beforeunload', function(){
  $(window).scrollTop(0);
});

我不知道你是否也需要看一下css。