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有关。如何在与包含position: relative的元素相关的css中插入HandoverYesDiv，而应将此absolute写为ORA-00904: invalid identifier srp.ITEM？

Answer 2

将以下代码添加到CSS中。

#HandoverYesDiv {
 position: absolute;   
}

Answer 3

如果要完全隐藏DOM元素，请使用css-property display。

替换

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

使用

if ($(this).prop('checked')) {
    $('#HandoverYesDiv').css('display', '');
} else {
    $('#HandoverYesDiv').css('display', 'none');
}

当显示隐藏的div时，页面向右移动

3 个答案: