javascript - 如何在 HTML 中制作一个在单击之前显示为选项卡的菜单？

Question

我正在制作一个网站，并想创建一个带有菜单的页面，该菜单显示为选项卡，直到用户单击它。这应该展开菜单以显示其内容。再次单击选项卡后，我希望它消失。我该怎么做（最好使用 jQuery）？

Answer 1

<style>
    .menu > li > ul {display:none;}
    .menu > li.active > ul {display:block;}
</style>

<ul class="menu">
        <li>
            Menu item 1
            <ul>
                <li>Submenu 1.1</li>
                <li>Submenu 1.2</li>
            </ul>  
        </li>   
        <li>
            Menu item 2
            <ul>
                <li>Submenu 2.1</li>
                <li>Submenu 2.2</li>
            </ul>     
        </li>
</ul>

<script>
$(document).ready(function()
{
    $('.menu > li').on("click", function()
    {
        $(this).toggleClass('active');
    });
});
</script>