jQuery显示隐藏内容

Question

我脑海中有一个想法，但是我被卡住了。我正在寻找与以下链接固定导航栏页面:关于联系人的投资组合

现在，我不想让" about“部分加载到新页面中，而是希望在单击"About”链接后，从“导航栏”下滑下一个大约470x330px的div框。

下面是我为导航设置代码格式的方式：

<li><a href="#" class="menu-button menu-drop"><span class="menu-label">Portfolio</span></a>
<div class="menu-dropdown menu-dropdown2">
<ul class="menu-sub">
<li><a href="index1.php?page=peoples" class="menu-subbutton"><span class="menu-label">People</span>
<div class="menu-desc">portraits/full figure</div></a></li>
<li><a href="#" class="menu-subbutton"><span class="menu-label">Products</span>
<div class="menu-desc">commercial base</div></a></li>
<li><a href="#" class="menu-subbutton"><span class="menu-label">Landscapes</span>
<div class="menu-desc">various landscapes</div></a></li>
<li><a href="index1.php?page=personal" class="menu-subbutton"><span class="menu-label">Personal</span>
<div class="menu-desc">personal aspects</div></a></li>
<li><a href="#" class="menu-subbutton"><span class="menu-label">Graphic Design</span>
<div class="menu-desc">various designs</div></a>
</li></ul></div></li> 
<li><a href="#" class="menu-button"><span class="menu-label">About</span></a></li>
<li><a href="#" class="menu-button"><span class="menu-label">Contact</span></a></li>

这是一个很酷的例子，只需点击“关于”：http://www.nicolastarierphotography.com/

Answer 1

不如..。

A Pure CSS Solution?

HTML

<ul>
    <li><input id='dropdown' type='checkbox' /><label for='dropdown'>Dropdown</label>
        <div>content content content content content content content content content content content content content content content content content content</div>
    </li>
</ul>

CSS

ul {
    list-style:none;
    margin:0;
    padding:0;
}
li {
    float:right;
    margin-right:50px;
}
li input[type=checkbox] ~ div{ 
    position:absolute;
    max-height:0;
    overflow:hidden;
    transition:all 200ms ease-in;
}
li label{
    margin-left:-20px;
    background:white;
}
li input[type=checkbox]:checked ~ div{
    max-height:200px;
}