jQuery显示隐藏内容

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

现在，与其将“关于”部分加载到新页面中，我希望 单击“关于”链接后，一个大约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>

这是一个非常酷的例子，只需点击“关于”：

那么

HTML

---

建立这样一个网站时要考虑的几个问题：搜索引擎很难准确地索引网站的独特页面。此外，从外部资源直接链接到您站点的特定页面变得更加困难。我不知道这一点，但是有没有其他方法可以在没有索引问题的情况下实现外观？有一些插件（或者您可以自己构建一个）使用35;（散列标签）在URL中模拟站点导航/历史-这也可以让您直接链接到打开了相关div的页面。查看这里的“查看它的工作情况”部分，以获取一个示例。另外，关于我上面评论的SEO部分，我相信如果你实现了这样一个哈希标记导航，使用指向特定“页面”的网站地图（使用tact中的哈希标记）可能会有助于SEO。但我不是100%确定。天哪，那看起来真的很整洁。我现在就要尝试一下：）谢谢，我该如何将此作为链接添加到导航部分？我喜欢，但如何将其转换为href链接以添加到现有导航中？示例格式：

它依赖于复选框和标签，但除非您重定向到外部页面或锚定…您不需要使用锚定标记-只需设置上述元素的样式即可

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

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;
}