如何使用jQuery slidetoggle方法将内容向下推送而不是重叠它？

我想知道如果有人能帮我找到解决这个问题的方法。我目前正在设计一个快速响应的移动网页，我现在有一个滚动的固定导航栏，并带有一个扩展菜单的jQuery滑动切换方法。如何使用jQuery slidetoggle方法将内容向下推送而不是重叠它？

我的问题是，当我点击'menu-trigger'按钮，而不是按照我希望的那样推下其余的内容时，菜单会覆盖下面的内容。

我试过寻找答案在这里和其他地方，但我找不到明确的答案。如果已经发布，我很抱歉。

我没有在这篇文章上发表任何代码，但是这里是一个假设的jfiddle，我复制了相同的确切问题。我希望有人能帮忙，我准备好把我的头发撕掉！

jQuery(document).ready(function() { 
 

 
\t jQuery(".menu-trigger").click(function() { 
 

 
\t \t jQuery(".menu-bar ul").slideToggle(); 
 
\t \t 
 
\t }); 
 

 
});

/*For Scrolling Purposes*/ 
 
body { 
 
    background:url(
 
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAPklEQVQYV2O8dOnSfwYg0NPTYwTRuAAj0QqxmYBNM1briFaIzRbi3UiRZ75uNgUHGbfvabgfsHqGaIXYPAMAD8wgC/DOrZ4AAAAASUVORK5CYII= 
 
    ) repeat; 
 
    height: 2000px; 
 
} 
 

 

 
.menu-bar { 
 
    position: fixed; 
 
    top: 0; 
 
    width: 100%; 
 
    background: orange; 
 
} 
 

 
.menu-bar ul { 
 
    display: none; 
 
} 
 

 
.content { 
 
    margin-top: 50px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 

 
    <!--Menu Bar Div--> 
 
    <div class="menu-bar"> 
 
    <div class="menu-trigger"> 
 
     <p> 
 
     Button 
 
     </p> 
 
    </div><!--/Menu Trigger--> 
 
     <ul> 
 
     <li>1</li> 
 
     <li>2</li> 
 
     <li>3</li> 
 
     </ul> 
 
    </div><!--/Menu Bar--> 
 
    
 
    <!--Content Div--> 
 
    <div class="content"> 
 
    <ul> 
 
     <li>Some Content</li> 
 
     <li>Some Content</li> 
 
     <li>Some Content</li> 
 
     <li>Some Content</li> 
 
    </ul> 
 
    </div><!--/Content--> 
 
    
 
</body>

这里是jfiddle链接。 https://jsfiddle.net/Lq7qqnn9/

背景：对于HTML和CSS来说相当不错，与JavaScript没有多大关系！

来源

2016-05-07 darthlaroque

位置固定的元素不按照正常的布局，使他们的孩子不会影响网页内容的其余部分。如果导航是相对的位置，那么它会推动内容。我假设你想要导航在页面上跟着你？如果是这样，为什么需要根据滚动位置推送不同的内容。 –

嗨，尼克！谢谢回复。是的，你确实说得很好。在这一点上，我尝试了不同的事情并遇到了这个问题。一旦我看到一切如何结合在一起，我就会知道是否要做出改变。 – darthlaroque

一种选择是在内容上使用占位符项而不是边距。 I.E.在固定块后面添加一个块，用它的固定覆盖层保持高度。

jQuery(document).ready(function() { 
 

 
    jQuery(".menu-trigger").click(function() { 
 

 
    $(".menu-placeholder").css("height", $(".menu-bar").height()); 
 
    jQuery(".menu-bar ul").slideToggle({ 
 
     progress: function() { 
 

 
     $(".menu-placeholder").css("height", $(".menu-bar").height()); 
 
     } 
 
    }); 
 

 
    }); 
 

 
});

/*For Scrolling Purposes*/ 
 

 
body { 
 
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAPklEQVQYV2O8dOnSfwYg0NPTYwTRuAAj0QqxmYBNM1briFaIzRbi3UiRZ75uNgUHGbfvabgfsHqGaIXYPAMAD8wgC/DOrZ4AAAAASUVORK5CYII= 
 
) repeat; 
 
    height: 2000px; 
 
} 
 
.menu-placeholder { 
 
    width: 100%; 
 
    height: 50px; 
 
} 
 
.menu-bar { 
 
    position: fixed; 
 
    top: 0; 
 
    width: 100%; 
 
    background: orange; 
 
} 
 
.menu-bar ul { 
 
    display: none; 
 
} 
 
.content {}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<body> 
 

 
    <!--Menu Bar Div--> 
 
    <div class="menu-bar"> 
 
    <div class="menu-trigger"> 
 
     <p> 
 
     Button 
 
     </p> 
 
    </div> 
 
    <!--/Menu Trigger--> 
 
    <ul> 
 
     <li>1</li> 
 
     <li>2</li> 
 
     <li>3</li> 
 
    </ul> 
 
    </div> 
 
    <!--/Menu Bar--> 
 

 
    <!--Content Div--> 
 
    <div class="menu-placeholder"></div> 
 

 
    <div class="content"> 
 
    <ul> 
 
     <li>Some Content</li> 
 
     <li>Some Content</li> 
 
     <li>Some Content</li> 
 
     <li>Some Content</li> 
 
    </ul> 
 
    </div> 
 
    <!--/Content--> 
 

 
</body>

来源

2016-05-07 04:23:50 teynon

哇！非常感谢你的答复！你太棒了！我会立即在我的代码中实现这一点，我花了很长时间来解决这个问题，我知道这里有人可以帮助我，谢谢你，汤姆！ – darthlaroque

如何使用jQuery slidetoggle方法将内容向下推送而不是重叠它？

回答

相关问题