javascript - 显示隐藏的 div 时页面向右移动

Question

我正在使用 css3、html5 和 javascript 构建页面。有一个隐藏在开始处的 div，仅当用户选中复选框时才可见。发生的事情是，当我选中复选框时，整个页面向右移动，取消选中复选框时，它返回到正常位置(向左移动)。我在 chrome 和 IE 上都遇到过它。我不确定是什么原因导致的，因为选中复选框时边距、边框和填充看起来是一样的。此外，当我按 F12 打开开发人员控制台时，不会发生转移。它仅在页面最大化时发生。代码是:

Javascript

$('#IsPropertyHandedOver').change(function () {
    if ($(this).prop('checked')) {
        $('#HandoverYesDiv').prop('hidden', false);
    } else {
        $('#HandoverYesDiv').prop('hidden', true);
    }
});

CSS

textarea.form-control{
height: 20em;
}

input[readonly] {
  cursor: default !important;
}

textarea[readonly]{
    cursor:default !important;
}

#addedNote{
height: 10em !important;
resize: none;
}

.field-validation-error{
    color:red
}

fieldset.scheduler-border {
border: 1px groove #ddd !important;
padding: 1.4em 1.4em 1.4em 1.4em !important;
margin: 0 0 1.5em 0 !important;
-webkit-box-shadow:  0px 0px 0px 0px #000;
box-shadow:  0px 0px 0px 0px #000;
}

legend.scheduler-border {
    font-size: 1.2em !important;
    font-weight: bold !important;
    text-align: left !important;
    width:auto;
    padding:0 10px;
    border-bottom:none;
}

.panel-inside-form .panel-body{
    background-color:#EEEEEE;
}


.panel-inside-form input[type="text"]{
    /*border-color:black;*/
    margin-bottom:1em;
    border-color:rgb(169,169,169);
}

.panel-inside-form textarea{
    /*border-color:black;*/
    margin-bottom:1em;
    border-color:rgb(169,169,169);
}

.panel-inside-form select{
    /*border-color:black;*/
    margin-bottom:1em;
    border-color:rgb(169,169,169);
}

.panel-inside-form input[type="checkbox"]{
    /*border-color:black;*/
    margin-bottom:1em;
}

select.input-validation-error{
    border-color:lightcoral
}

input[type="text"].input-validation-error{
    border-color:lightcoral
}

textarea.input-validation-error{
    border-color:lightcoral
}

.form-group.required .control-label:after { 
   content:" *";
   color:red;
}

HTML

<div id="HandoverYesDiv" hidden>
    <div class="form-group form-group-check">
        <div class="col-sm-4">
            @Html.LabelFor(m => m.IsKeysHandedOver, new { @class = "control-label" })
        </div>
        <div class="col-sm-8">
            @Html.CheckBoxFor(m => m.IsKeysHandedOver)
            @Html.HiddenFor(m => m.EventId)
            @Html.HiddenFor(m => m.IsHandoverCompleted)
        </div>
    </div>
    <div class="form-group form-group-check">
        <div class="col-sm-4">
            @Html.LabelFor(m => m.IsSafetyCertificatesHandevOver, new { @class = "control-label" })
        </div>
        <div class="col-sm-8">
            @Html.CheckBoxFor(m => m.IsSafetyCertificatesHandevOver)
        </div>
    </div>
    <div class="form-group form-group-check">
        <div class="col-sm-4">
            @Html.LabelFor(m => m.IsInstructionsOrManualsHandedOver, new { @class = "control-label" })
        </div>
        <div class="col-sm-8">
            @Html.CheckBoxFor(m => m.IsInstructionsOrManualsHandedOver)
        </div>
    </div>
    <div class="form-group form-group-check">
        <div class="col-sm-4">
            @Html.LabelFor(m => m.IsLegionellaCheckPerformed, new { @class = "control-label" })
        </div>
        <div class="col-sm-8">
            @Html.CheckBoxFor(m => m.IsLegionellaCheckPerformed)
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-4">
        </div>
        <div class="col-sm-8">
            @Html.ValidationMessageFor(m => m.IsLegionellaCheckPerformed)
        </div>
    </div>
</div>

Answer 1

我认为您的问题与 positioning 有关通过CSS。 在包含HandoverYesDiv的元素相关的css中插入position:relative怎么样，而这个应该写成absolute？