javascript - slideToggle 不会下推下面的 div

Question

首先，这是 JSFIDDLE 的链接:http://jsfiddle.net/chani987/uu693a0v/

点击选择 1 或 选择 2 链接后​​，.hiddenbox div 弹出。

slideToggle javascript 工作正常。问题是，当切换 .hiddenbox div 时，我期望页脚 div 被下推，但页脚保持在原来的位置并且 .hiddenbox div 与页脚重叠。

我已经尝试将 .hiddenBox 的 position: absolute 更改为 position: none;，但它会导致 div 位于页面顶部。 有没有办法让页脚 div 在 hiddenBox 弹出时向下滑动，而 hiddenBox 紧跟在前一个 div 之后？

这是我第一次在 stackoverflow 上发帖。如果我没有提供所需或足够的资源，请告诉我!谢谢

Answer 1

这行得通，但可能还有更好的方法。添加

Position:relative;top:0px;

到您的#main_footer CSS。

$('#audience_text').click(function(){
$("#artist_type").slideUp('slow');
$("#audience_type").slideToggle('slow');
var a =$("#main_footer").css("top");    
a=="0px"?$("#main_footer").css("top","+=200"):$("#main_footer").css("top","0");
                                   
 });
$('#artist_text').click(function(){
$("#audience_type").slideUp('slow');
$("#artist_type").slideToggle('slow');   
 var a =$("#main_footer").css("top");    
a=="0px"?$("#main_footer").css("top","+=200"):$("#main_footer").css("top","0");

});

这是一个 Fiddle