jquery - 在当前 Div 之外切换 Div

Question

目前，我有一个附加到 li 元素的切换选项。但是，我似乎无法显示在 li 父 div 之外切换的 div。

<div id="header">
    <header>
        <ul>
            <li>1</li>
            <li class="action" data-content="#content1">2</li>
        </ul>
    </header>
</div>
<div class="content" id="content1">
    <p>A Bunch of Content</p>
</div>

为了节省空间，这里是我的 fiddle :http://jsfiddle.net/Thelawman/9KCg9/当我这样做时，我可以在 header 中看到切换的 div 的顶部。我想直接在 header 元素下显示它。提前致谢，这里的人总是非常乐于助人。

Answer 1

问题是因为 position:fixed 用于 div#header。试试这个:

#header {
    overflow:hidden;
    top:0;
    left:0;
    width:100%;
    height:66px;
    z-index:1;
    background-color:#000000;
}

DEMO

或

如果您想在滚动页面时使用 position:fixed 将页眉固定在顶部。您可以使用 margin-top 到 div.content。试试这个:

.content {
    display:none;
    width:500px;
    height:200px;
    padding:10px;
    background-color:#FF000D;
    border: 4px solid;
    margin-top:68px;
}

DEMO