Question

当我点击摄影师的名字时，弹出第一个菜单（这个有效）当我点击菜单（工作）的第一个链接时，应弹出一个子菜单。其他链接应该只有文字。但有些我怎么能让它在单击工作时子菜单显示的工作。有什么建议吗？

Jquery代码：（verbergdivs = hide divs）

function verbergdivs() {
    $("#content").children().hide();
};


$(document).ready(function() {
    verbergdivs();
    $("#menu").hide();
        $("h3").click(function(){
            $("#menu").toggle("slow");
        });
    $("nav a").click(function(event){
        var url = $(this).attr("href");
        verbergdivs();
        $(url).show();              
        $(url).children().hide();   
        $(url).find("h1, p").slideDown(500)
        event.preventDefault();
    });

});
</script>
</head>

HTML code：

<body>
<h3> Marsel van Oosten Photography</h3>
    <div id="wrapper">
    <nav>
        <ul id="menu">
            <li> <a href=".work">Work</a></li>
            <li> <a href=".about">About</a></li>
            <li> <a href=".news">News</a></li>
            <li> <a href=".contact">Contact</a></li>
        </ul>
    </nav>

    <section id="content">
        <div class="work">
    <nav>
        <ul id="submenu">
            <li> <a href=".people">People</a></li>
            <li> <a href=".objects">Objects</a></li>
            <li> <a href=".series">Series</a></li>
        </ul>
    </nav>
        </div>
        <div class="about">
            <h1>About</h1>
            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
        </div>
        <div class="news">
            <h1>News</h1>
            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.s</p>
        </div>
        <div class="contact">
            <h1>Contact</h1>
            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
        </div>
    </section>

    </div>

Answer 1

那是因为你做了

$(url).children().hide();   
$(url).find("h1, p").slideDown(500);

因此，您只显示h1和p元素，但您的.work div不包含任何此类元素..

Answer 2

http://jsfiddle.net/hgF8K/1/

<h3> Marsel van Oosten Photography</h3>
<div id="wrapper">
<nav>
    <ul id="menu">
        <li> <a href=".work">Work</a></li>
        <li> <a href=".about">About</a></li>
        <li> <a href=".news">News</a></li>
        <li> <a href=".contact">Contact</a></li>
    </ul>
    <ul id="submenu"  class="work">
        <li> <a href=".people">People</a></li>
        <li> <a href=".objects">Objects</a></li>
        <li> <a href=".series">Series</a></li>
    </ul>
</nav>

<section id="content">

    <div class="about">
        <h1>About</h1>
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
    </div>
    <div class="news">
        <h1>News</h1>
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.s</p>
    </div>
    <div class="contact">
        <h1>Contact</h1>
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
    </div>
</section>

</div>

function verbergdivs() {
    $("#content,#submenu").children().hide();
};


$(document).ready(function() {
    verbergdivs();
    $("#menu,#submenu").hide();
        $("h3").click(function(){
            $("#menu").toggle("slow");
        });
    $("nav a").click(function(event){
        var url = $(this).attr("href");
        verbergdivs();
        $(url).show();              
        $(url).children().hide();   
        $(url).find("h1, p, li").slideDown(500)
        event.preventDefault();
    });

});

切换特定菜单（链接）上的子菜单单击。 jQuery的

2 个答案: