Question

所以这是我的小提琴：http://jsfiddle.net/R47Jd/1/

我的问题：
- 当我点击工作旁边的按钮时，我希望子菜单（正在工作）和内容隐藏起来。
- 当我点击＆＃34; NICK POON PHOTOGRAPHY＆＃34;时，我也想隐藏一切。此功能仅在我的子菜单被隐藏时有效。我怎样才能完成这项工作？我知道我的代码并不是很整洁，但这是我第一次编写jQuery，我希望你们能帮助我。

在此先感谢，我非常感谢您的时间

这是代码：
的的jQuery

$(document).ready(function() {
    $("ul#menu, ul#submenu, div#content").hide();
    $("h3").click(function () {
        if ( $( "ul#submenu" ).is( ":hidden" ) ) {  
            $("ul#submenu").hide();
            if ( $( "ul#menu" ).is( ":hidden" ) ) {
                $( "ul#menu" ).slideDown( "slow" );
            } else {
                $( "div#content, ul#submenu, ul#menu" ).hide();
            }
        }
    });
    $("li#hoofdmenu").click(function () {
        if ( $( "ul#submenu" ).is( ":hidden" ) ) {
            $( "ul#submenu" ).slideDown( "slow" );
        } else {
            $( "ul#submenu, div#content" ).hide();
        }
    });

    $("a").click(function(event){
        var url = $(this).attr("href");
        $("div#content").show();
        $(url).show();              
        $(url).children().hide();   
        $(url).find("h1, p, li").slideDown(500)
        event.preventDefault();
    });
});

HTML

<h3>Nick Poon photography</h3>
<ul id="menu">
    <li id="hoofdmenu">Work</li>
    <li><a href=".about">About</a></li>
    <li><a href=".news">News</a></li>
    <li><a href=".contact">Contact</a></li><br />
    <br />
        <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>
</ul>

<div 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>
</div>

CSS

h3 {
    text-transform: uppercase;
    cursor: pointer;
}
ul {
    margin: 0;
    padding: 0;
}

li {
    display:inline;

}

Answer 1

你在找这个吗？

 $("a").click(function (event) {
     var url = $(this).attr("href");
     $("#content").find("div").hide();
     $("div#content").show();
     $(url).show();
     $(url).children().hide();
     $(url).find("h1, p, li").slideDown(500)
     event.preventDefault();

 });

Demo

修改

$(document).ready(function () { $("ul#menu, ul#submenu, div#content").hide(); $("h3").click(function () { $("#menu").slideToggle(); $("#content").hide(); }); $("li#hoofdmenu").click(function () { $("ul#submenu").slideToggle(); }); $("a").click(function (event) { var url = $(this).attr("href"); $("#content").find("div").hide(); $("div#content").show(); $(url).show(); $(url).children().hide(); $(url).find("h1, p, li").slideDown(500) event.preventDefault(); }); });

Updated fiddle

如何在单击对象时隐藏多个ID - jQuery

1 个答案: