jQuery 显示隐藏内容

Question

我脑子里有一个想法，但是我被卡住了。 我正在寻找带有以下链接的固定导航栏的页面: 文件夹 关于 联系方式

现在，我不想将“关于”部分加载到新页面中，而是 单击“关于”链接后，一个大约 470x330 像素的 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;
}