带有jquery显示和隐藏div的多级菜单

在页面加载时，我只希望显示菜单1。然后，当您单击“项目”时，它旁边会显示“菜单2”，然后单击“当前”或“存档”，它会显示“菜单3”。我如何在jQuery中简单地做到这一点

类似的东西（除了闪光）

项目
服务
联系
现在的
档案文件
住宅的
零售
健康
贸易的

在div中添加一个class

projects

，使选择器易于选择

jQuery

$('.projects').click(function(e){
    $('.menu-2').toggle();
});
$('.menu-2').click(function(e) {
    $('.menu-3').toggle();
});

HTML

<div class="menu-1">
    <div class="projects">Projects</div>
    <div>Services</div>
    <div>Contact</div>
</div>
<div class="menu-2" style="display:none">
    <div>Current</div>
    <div>Archive</div>
</div>
<div class="menu-3" style="display:none">
    <div>Residential</div>
    <div>Retail</div>
    <div>Health</div>
    <div>Commercial</div>
</div>

项目
服务
联系
现在的
档案文件
住宅的
零售
健康
贸易的

这里有一个非常简单的方法，可以通过一些在线注释来指导您解决问题

---

你可以使用点击功能来实现它。你能告诉我如何使用这个功能吗？

<div class="menu-1">
    <div class="projects">Projects</div>
    <div>Services</div>
    <div>Contact</div>
</div>
<div class="menu-2" style="display:none">
    <div>Current</div>
    <div>Archive</div>
</div>
<div class="menu-3" style="display:none">
    <div>Residential</div>
    <div>Retail</div>
    <div>Health</div>
    <div>Commercial</div>
</div>

// Hide menu 2 and 3 initially
$('.menu-2, .menu-3').hide();

// Look at all the divs inside of the first menu when they're clicked
$('.menu-1 div').click(function(){
    // If the clicked div has a text of Projects, then toggle the second menu
    if($(this).text() === 'Projects'){
        $('.menu-2').toggle();   
    } 
});

// If any div in the second menu is clicked, toggle the third menu.
$('.menu-2 div').click(function(){
    $('.menu-3').toggle();
});