Question

在页面加载时，我希望只显示菜单1。然后，当您单击项目时，菜单-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

<强> JSFIDDLE DEMO

在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>

Answer 2

这是一种通过一些内联评论来解决问题的一种非常简单的方法来指导您。

Demo

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

带有jquery show和hide div的多级菜单

2 个答案: