我如何使一个菜单在HTML中显示为一个选项卡，直到点击

How do I make a menu in HTML which appears as a tab until clicked?

本文关键字：选项 一个 菜单 何使一 HTML 显示      更新时间：2023-09-26

我正在制作一个网站，并想创建一个页面，其中显示为选项卡菜单，直到用户点击它。这将展开菜单以显示其内容。一旦再次点击选项卡，我希望它消失。我如何做到这一点(最好使用jQuery)?

<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>
相关文章：