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

Question

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

类似于http://www.davidchipperfield.co.uk的东西（除了闪存）

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

Answer 1

这是一种非常简单的方法，可以通过一些内嵌注释来指导您解决问题。

演示

// 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();
});

Answer 2

JSFIDDLE 演示

向 div添加一个类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>