jQuery - 单击时隐藏和显示元素

Question

我想制作一个通常显示“联系我们”的底部栏，但是当单击该栏时，它将显示联系方式详细信息，再次单击会将底部栏再次变为“联系我们”。我尝试了toggle()，但这让我陷入了“联系我们+”和详细信息都被隐藏的情况。

我想我需要一个 else 语句，但我对 jQuery 的了解乏善可陈。

http://jsfiddle.net/DzYTZ/2/ (由于某种原因它不起作用)

有人可以帮忙吗？

谢谢

<div class="footer2"> 
    <a href="#" class="contactus">
        Contact Us
    </a>

    <div class="more">
        <a href="#">
            @twitterhandle
        </a>

        <a href="#">
            e-mail
        </a>
    </div>
</div>

    .footer2
{
background-color: black;
margin-top: 1em;
padding-top: 1em;
padding-bottom: 1em;
text-align: center;
width: 100%;
}
    .footer2 .contactus
{
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    color: #e3e3e3;
    text-decoration: none;
    display: inline;
}
    .footer2 .contactus:hover
{
    color: white;
}
    .footer2 .more
{
    margin-left: 1em;
    display: none;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    display: inline;
}
    .footer2 .more a
{
    margin-left: 2em;
    color: #e3e3e3;
    text-decoration: none;
}
    .footer2 .more a:hover
{
    color: white;
}

Answer 1

You can use this

$('.footer2').click(function() {
    var display=$('.footer2 .more').css('display') == 'inline' ? 'none' : 'inline'; 
    $('.footer2 .more').css('display', display);
});

同时从 footer2 .more{...} 中删除 display:inline 以使其最初处于隐藏状态。