使用Javascript/jQuery动态改变outerHeight而不刷新页面

Question

我试图动态改变#mainPart的marginTop，这是nav项目后的部分，navbar-fixed-top类。

我遇到的问题是，有了这个功能，我必须刷新页面的变化发生-为margin设置。但是，我希望它发生与Submit按钮按下。Submit按钮不刷新页面，它只是根据查询的关键字结果输出数据。Submit按钮本身在HTML中具有ng-click和do_Submit的功能。

我已经创建了下面的函数，并将其添加到do_Submit函数，但它只在我刷新页面时起作用，而不是当我按下Submit按钮

$(window).load(function() {
maxHeight = $('#main-navbar').outerHeight();
alert("Height of main-navbar: " + maxHeight);
$('#mainPart').css({ marginTop : maxHeight + 5 + 'px' }); 
});

注意#main-navbar是HTML中nav部分的ID,#mainPart是紧跟在nav部分之后的部分的ID。

我的提交按钮的HTML:

<button type="button" class="btn" tooltip ng-click="submit(query)" title="<p>Query sentences</p>"><span ></span> Submit</button>

如何在不刷新页面的情况下动态更改marginTop ?谢谢你！

Answer 1

你可以添加

$('#mainPart').css({ marginTop : maxHeight + 5 + 'px' });

到提交按钮的另一个事件侦听器。我不知道do_Submit函数，但如果该按钮只是一个html元素，那么在JS中选择它并将CSS更改添加到按钮自己的事件侦听器中，而不是在页面加载时添加。