下推.slideToggle（）上的內容

Question

我在設計如下所示的響應式布局時遇到了一些麻煩：

如果瀏覽到http://www.wickersleysixthform.net ，則可以看到此操作。

基本上，我正在嘗試創建一個響應菜單，因此在768px及以上的瀏覽器中，您將看到正常的水平導航。 然后，對於481px以下的任何內容，您將看到“三行”菜單，其上帶有.slideToggle（）效果，一旦按下該菜單就會將其下拉。

我可以使它正常工作，但是.slideToggle（）不會將我需要它完成的其余內容壓低。 另外，如果我手動調整瀏覽器屏幕的大小，則三行也不會出現，但是如果我調整大小然后刷新頁面，它將可以，但是如果我這樣做，則不會顯示較大屏幕大小的普通鏈接。 我希望這是有道理的。

這是我在jQuery（document）.ready（function（$）{}）;中進行切換的jQuery。

/* getting viewport width */
var responsive_viewport = $(window).width();

/* if is below 481px */
if (responsive_viewport < 481) {

    $(".top-nav").before('<div id="menu">&#9776;</div>');
    $("#menu").click(function(){
        $(".top-nav").slideToggle();
    });

}

/* if is above or equal to 768px */
if (responsive_viewport >= 768) {

    $(".top-nav").show();
}

有人可以幫忙嗎？ 毫無疑問，這很簡單，但卻讓我發瘋。 可能基於CSS而非jQuery？

我正在使用的CSS如下（在我的基本/移動樣式表中）。

.header {
background-color:@blue;
padding-top:10px;
height:50px;
}

#menu {
display:block;
font-size:1.75em;
position: absolute;
right: 10px;
top: 2px;
}

.top-nav {
display:none;
}

.top-nav.open {
display:block;
background:@blue;
}

在我的768及以上樣式表中：

.header {
padding-top:0;
height:70px;
position:fixed;
width:100%;
z-index:10;
}

#menu {
display:none;
}

.top-nav {
display:block;
}

我的HTML結構：

<header class="header" role="banner">
<div id="inner-header" class="wrap clearfix">
<a rel="nofollow" href="http://www.wickersleysixthform.net">
<img id="logo" width="50px" height="36px" src="http://www.wickersleysixthform.net/wp-content/themes/sixthform/library/images/white.png">
</a>
<nav role="navigation">
<div id="menu">☰</div>
<ul id="menu-main-menu" class="nav top-nav clearfix">
<li><a href="http://www.wickersleysixthform.net/">About</a></li>
<li>
<a href="http://www.wickersleysixthform.net/current/">Current Students</a>
<ul class="sub-menu"></ul>
</li>
<li><a href="http://www.wickersleysixthform.net/courses/">Courses</a></li>
<li><a href="http://www.wickersleysixthform.net/student-life/">Student Life</a></li>
<li><a href="#">Prospectus</a></li>
<li><a href="http://www.wickersleysixthform.net/apply/">Apply</a></li>
<li><a href="http://www.wickersleysixthform.net/contact/">Contact</a></li>
</ul>
</nav>
</div>
</header>

Answer 1

問題是您的header元素的固定高度為50px。 因此，當菜單展開時，標題保持相同的高度。

刪除高度或將其替換為min-height可以解決您的問題