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>

如何在HTML中创建一个菜单，在单击之前显示为选项卡？

1 个答案: