Question

我正在使用bootstrap构建我的第一个骨干应用程序。它是一个简单的联系人管理器，到目前为止只从阵列中读取联系人并显示联系人的信息。最初，联系卡被最小化，但是当在联系卡内部单击时，它使用jquery动画扩展。然而，最后一列混淆了布局，因为它将行放在它下面，我不明白为什么。我已在jsfiddle上传了我的应用。你可以帮我解释一下为什么最后一栏在动画中出现下面的行时会搞乱吗？

我的下划线主干模板

<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>

带有动画的骨干视图

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'});

这只有一半解决了你的问题，下一个col被推下但是然后弹回来。似乎正在发生的事情是某些类可能.buffer正在推翻内容然后一旦被覆盖并且边距底部从120px变为10px它就会重新插入到位。

您可能需要查看添加类的顺序或首先删除类，然后添加其他类以更改其边距。希望这能让你知道在哪里看。

最后一个bootstrap列在jquery animate上面排成一行

1 个答案: