javascript - 在里面用htmlhelpers动态创建div？

Question

我的 MVC 应用有问题，如图所示。

因此，当我单击其中一个复选框时，脚本会将 div 的可见设置为 visible。但这不是个好主意，因为第二个 div 上面有一个空白区域。

带有脚本独立的复选框:

    <label><input type="checkbox" onclick="biurowyScript();" id="biurowyCheck" />  Pracownik biurowy</label>
            <label><input type="checkbox" onclick="przewodnikScript();" id="przewodnikCheck" style="margin-left: 30px" />   Przewodnik</label>

biurowy div

   <div id="biurowy" style="visibility: hidden">
            <div class="form-group">

                @Html.LabelFor(model => model.Pracownik_biurowy.Nazwa_uzytkownika, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.Pracownik_biurowy.Nazwa_uzytkownika, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.Pracownik_biurowy, "", new { @class = "text-danger" })
                </div>
            </div>
        </div>

przewodnik 分区:

 <div id="przewodnik" style="visibility: hidden">
            <div class="form-group">
                @Html.LabelFor(model => model.Przewodnik.Uprawnienia, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.Przewodnik.Uprawnienia, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.Przewodnik.Uprawnienia, "", new { @class = "text-danger" })
                </div>
            </div>
        </div>

在脚本中，我只将 div 的可见设置为 visible。但正如我所说，这不是这个应用程序的好主意。那么我可以用什么来解决这个问题？

Answer 1

使用 display="none" 而不是 visibility="hidden"

<div id="biurowy" style="display: none">
            <div class="form-group">

                @Html.LabelFor(model => model.Pracownik_biurowy.Nazwa_uzytkownika, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.Pracownik_biurowy.Nazwa_uzytkownika, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.Pracownik_biurowy, "", new { @class = "text-danger" })
                </div>
            </div>
        </div>

编辑:

当您使用 visibilt=hidden 时，它会保留空间，而使用 display=none 时，它​​不会保留空间。你可以用同样的方式用 jquery 显示它，我的意思是 $(item).show()