javascript - 在 .slideToggle() 上下推内容

Question

我在设计响应式布局时遇到了一些麻烦，如下所示:

如果您浏览到 http://www.wickersleysixthform.net您可以在实际操作中看到这一点。

基本上，我正在尝试创建一个响应式菜单，以便在 768 像素及以上的浏览器中您将看到一个正常的水平导航。然后，对于任何低于 481 像素的内容，您将看到“三行”菜单，一旦按下，就会在菜单下拉菜单上带有 .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 替换它可以解决您的问题