使用 jQuery 隐藏/显示时跳转到页面顶部

Question

我正在尝试根据单击的按钮隐藏/显示一些 div。每次我单击不同的按钮来显示某个 div 时，它都会跳转到页面顶部。如果相关的话，我也在使用 Ruby on Rails。我也尝试过使用 return false ，但这也不起作用。谁有想法？谢谢。

Javascript：

$(document).ready(function(){
    $('#new-event-button').click(function(e){
        e.preventDefault();
        $('#edit-events').hide();
        $('#delete-events').hide();
        $('#new-event').slideDown();
    });
    $('#edit-events-button').click(function(e){
        e.preventDefault();
        $('#new-event').hide();
        $('#delete-events').hide();
        $('#edit-events').slideDown();
    });
    $('#delete-events-button').click(function(e){
        e.preventDefault();
        $('#new-event').hide();
        $('#edit-events').hide();
        $('#delete-events').slideDown();
    }); 
});

查看代码：

<button id="new-event-button">New Event</button>
<button id="edit-events-button">Edit Events</button>
<button id="delete-events-button">Delete Events</button>

<div id="events-forms">
    <div id="new-event">
        <%= render :partial => "new_event", :locals => { :event => Event.new(:timeline_id=>@timeline.id) } %>
    </div>

    <div id="edit-events">
        <%= render :partial => "edit_events", :locals => { :events => current_user.events } %>  
    </div>

    <div id="delete-events">
        <%= render :partial => "delete_events", :locals => { :events => current_user.events } %>        
    </div>
</div>

Answer 1

如果您正在填充的 div#events-forms 在您单击按钮时没有高度，那么它的高度将变为 0，然后再次展开以适应其内容。这就是触发浏览器跳回的原因，因为没有更多内容要显示。

-如果可能的话，你可以给包含的 div#event-forms 一个固定的大小，所以只有内容在变化，而不是元素的高度。

#events-forms{
border: 1px solid black;
height:400px;

-否则您可能会考虑首先更改包含 div 的高度（使用 javascript/jquery）以适合您要粘贴到其中的数据。

如果您使用以下 css sn-p 可以看到 div 不断增长和扩展，这可能更容易理解为什么您被设置到页面顶部。

#events-forms{
    border: 1px solid black;
}