最后 bootstrap 列在 jquery 动画下方显示行

Question

我正在使用 bootstrap 构建我的第一个 backbone 应用程序。这是一个简单的联系人管理器，目前仅从数组中读取联系人并显示联系人信息。最初，联系人卡片被最小化，但在联系人卡片内部单击后，它会使用 jquery 动画展开。然而，最后一列弄乱了布局，因为它把它下面的行抬高了，我不知道为什么。我已经在 jsfiddle 上上传了我的应用程序。你能帮我看看为什么在动画显示下面的行时最后一列搞砸了吗？

我的下划线 backbone 模板

<div class="container-fluid">
    <nav class="navbar navbar-inverse">
        <label class="navbar-brand">Backbone Contact Manager</label>
    </nav>

    <div class="row">
        <div id="filter" class="form-group col-lg-2 col-sm-3 col-xs-6">
            <label for="filterSelect">Filter Groups:</label>
        </div>
    </div>

    <div id="directory" class="row"></div>


    <!-- UNDERSCORE TEMPLATES -->
    <script type="text/template" id="contactTemplate">
        <div class="col-lg-3 col-sm-6 col-xs-6">
            <a class="btn contact buffer">
                <div class="contact-header"></div>
                <div class="img-div">
                    <img src="http://www.clker.com/cliparts/A/Y/O/m/o/N/placeholder.svg" class="contact-image img-circle">
                </div>
                <div class="contact-name">
                    <h4> <%= name %></h4>
                </div>
                <div class='contact-info'> 
                    <br>
                    <span class='glyphicon glyphicon-info-sign'></span>
                    <label><%= group %></label>
                    <br>
                    <span class="glyphicon glyphicon-map-marker"></span>
                    <label><%= address %></label>
                    <br>
                    <span class="glyphicon glyphicon-envelope"></span>
                    <label><%= email %></label>
                    <br>
                    <span class="glyphicon glyphicon-earphone"></span>
                    <label><%= phone %></label>
                </div>
            </a>
        </div>
    </script>
</div>

我的 backbone 动画视图

var ContactView = Backbone.View.extend({
    //get the undercore template
    template: _.template($('#contactTemplate').html()),

    events: {
        'click a': 'renderContactInfo',
    },

    //always render on initialize so you don't have to later
    initialize: function() {
        this.render();
    },
    render: function() {
        this.$el.html(this.template(this.model.toJSON()));
        return this;
    },

    renderContactInfo: function() {
        var currentContact= this.$el.find('a');
        if (currentContact.hasClass('addHeight')) {
            currentContact.removeClass('addHeight');
            this.$el.find("div:nth-child(4)").toggle();
            currentContact.animate({ height: '90px', 'margin-bottom':'120px' });

        } 
        else {
            currentContact.animate({ height: '200px', 'margin-bottom': '0px'});
            currentContact.addClass('addHeight');
            this.$el.find("div:nth-child(4)").toggle();

        }
    }
});

Answer 1

查看了一下你的问题好像是这里引起的：

currentContact.removeClass('addHeight');
            this.$el.find("div:nth-child(4)").toggle();
            currentContact.animate({ height: '90px', 'margin-bottom':'120px' });

        } 
        else {
            currentContact.animate({ height: '200px', 'margin-bottom': '0px'});
            currentContact.addClass('addHeight');
            this.$el.find("div:nth-child(4)").toggle();

第一个的高度和底部边距总计 210px，而第二个总共只有 200px，所以将 else 中的 margin-bottom 的值更改为 10px

currentContact.animate({ height: '200px', 'margin-bottom': '10px'});

这只解决了你问题的一半，下一个列被推下但又弹回。似乎正在发生的事情是，一些 class 可能 .buffer 正在将内容向下推，然后一旦它被覆盖并且 margin-bottom 从 120px 更改为 10px 它就会回到原位。

您可能需要查看添加 class 的顺序，或者先删除一个 class，然后添加另一个 class 以更改其页边距。希望这能让您知道在哪里看。

最后 bootstrap 列在 jquery 动画下方显示行

Last bootstrap column brings underneath row up on jquery animate

css

jquery

backbone.js

underscore.js

twitter-bootstrap