-4

在页面加载时,我只想显示菜单 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>
4

2 回答 2

0

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

演示

// 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();
});
于 2013-10-22T13:42:30.800 回答
0

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>
于 2013-10-22T13:40:57.083 回答