Question

我的视图中有一个按钮，单击该按钮可显示部分视图的内容。每次用户单击该按钮时，都会添加部分视图的内容。但是，这样可以使主视图不会降低，以便为局部视图中的字段留出空间。因此，在第二次单击后，部分视图中的字段与主视图的内容重叠我尝试在按钮单击上添加一个事件，它将换行标记附加到部分视图将出现的div，但这不会移动页面内容。

如何在主视图中缩小内容？

overlap

Jquery的：

$('#btn-add-employment').click(function () {
            var num = parseInt($('#employer-count').val());
            if ((num+1) > 3) {
                $('#employer-limit').text("Limit of 3 employers");
            } else {
                $('#employer-count').val(num + 1);
                $('#employer-limit').empty();
                var id = 0;  //set to 0 because for now, appicant record has not been created yet.
                $.ajax({
                    type: "POST",
                    url: "@Url.Action("AddEmploymentHistory")",
                    data: { ApplicantID: id, RecordNum: (num+1) },
                    success: function(result) {
                        $('#employment-history_' + (num+1)).html(result);
                    }
                });
            }
        });

HTML：

<button class="btn btn-default" type="button" id="btn-add-employment">Add Employer</button>
                <span id="employer-limit"></span>
                <input type="hidden" id="employer-count" value="0" />
                <div id="employment-history_1"></div>
                <div id="employment-history_2"></div>
                <div id="employment-history_3"></div>

Answer 1

为了解决这个问题，我修改了jquery以找到该部分的当前高度值，然后添加到高度以便为部分视图中的字段腾出更多空间。具有新添加的局部视图的部分的总高度是它的当前高度加上原始高度。我没有保存原始高度，因此必须使用已添加的部分视图的数量来计算。

$('#btn-add-employment').click(function () {
            var num = parseInt($('#employer-count').val());
            if ((num+1) > 3) {
                $('#employer-limit').text("Limit of 3 employers");
            } else {
                $('#employer-count').val(num + 1);
                $('#employer-limit').empty();
                //adjust height on panel   <<< NEW STUFF
                var newheight = parseInt($('#collapseTwo').css('height').replace("px", "")) / (num + 1) + parseInt($('#collapseTwo').css('height').replace("px", ""));
                $('#collapseTwo').css("height", newheight);

                var id = 0;  //set to 0 because for now, appicant record has not been created yet.
                $.ajax({
                    type: "POST",
                    url: "@Url.Action("AddEmploymentHistory")",
                    data: { ApplicantID: id, RecordNum: (num+1) },
                    success: function(result) {
                        $('#employment-history_' + (num+1)).html(result);
                    }
                });
            }
        });

如何在主视图页面上保留部分视图与重叠内容

1 个答案: