Javascript 将内容下推到.slideToggle（）上

我在设计以下响应性布局时遇到一些问题：

如果你浏览到，你可以看到这一点的行动

基本上，我正在尝试创建一个响应菜单，这样在768px及以上的浏览器中，您将看到一个正常的水平导航。然后，对于481px以下的任何内容，您将看到带有.slideToggle（）效果的“三行”菜单，一旦按下，该菜单将下拉

我可以让它工作，但是.slideToggle（）并没有像我需要的那样将其余的内容向下推。另外，如果我手动重新调整浏览器屏幕的大小，这三行将不会显示，但是如果我调整大小，然后刷新页面，这三行就可以了，但是如果我这样做，那么较大屏幕大小中的正常链接就不会显示。我希望这是有道理的

这是我在jQuery（document.ready（函数（$）{}）中用于切换的jQuery

在我的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>

☰

问题在于

标题

元素的固定高度为50px。因此，当菜单展开时，标题保持相同高度

---

删除高度或将其替换为

min height

可以解决您的问题

最有可能的是，正在向下滑动的元素不在正常文档流中。我们需要看到css和html。@KevinB-我认为查看该网站比我展示它更容易，这就是为什么我没有包括它。如果这有帮助的话，我可以把它贴出来。@EnigmaRM-在英国，学生的成绩是A-E，也有A*-C和A*-C（包括数学和英语），学校/六年级学生会把它加入他们的统计数据中！这可能更容易，但对社区来说毫无用处。一旦你解决了问题，你网站的链接将不再显示问题，也不会有任何代码来重现问题。此外，如果没有上述信息，您的问题可能会被认为是离题和封闭的。最好是包含代码的一小部分，重新生成您所遇到的问题。谢谢！我用min height替换了它，这很有效。你知道我为什么在调整浏览器窗口大小时会丢失菜单或菜单图标不显示吗？因为

#menu

元素是用javascript添加的，并且只在页面加载时显示。（scripts.js:34）为什么不总是在HTML中添加菜单项，并用媒体查询将其隐藏？

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

#menu {
display:none;
}

.top-nav {
display:block;
}

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