javascript - 使用jquery隐藏元素占用页面空间

Question

我正在使用 jquery 显示和隐藏服务器控件，即 Textboxe 和 DropDownList。

显示和隐藏工作正常，但隐藏的元素占用了页面上的空白空间。

在使用 jquery hide() 函数后，我尝试了以下技巧来隐藏元素:

css('可见性', '隐藏')

css('显示', '无')

如 this Question 中定义

但还是同样的问题。

这是我的代码:

 <script>
    $(document).on("click", ".edit", function () {
    var col_name= $(this).data('col_name');
    var tbl_name = $(this).data('tbl_name');
    var tr = $(this).parent().parent();
    var tdRecords = $(tr).children();
    var CurrValue = $(tdRecords[0]).text();
    $('#<%= txt_Curr_Val.ClientID %>').val(CurrValue);
    $('#<%=txt_colname.ClientID%>').val(col_name);
    $('#<%=txt_tblname.ClientID%>').val(tbl_name);
        if (col_name == 'relig_code')
        {
            $('#<%=ddl_relig.ClientID%>').show('slow');
            //$('#<%=txt_New_Val.ClientID%>').hide('slow');
            $('#<%=txt_New_Val.ClientID%>').css('visibility', 'hidden')
        }
        else
        {
            //$('#<%=ddl_relig.ClientID%>').hide('slow');
            $('#<%=ddl_relig.ClientID%>').css('visibility', 'hidden')
             $('#<%=txt_New_Val.ClientID%>').show('slow')
        }
    });
  </script>

这是 HTML:

<div class="modal-body">
                      <div class="row">
                          <div class="col-md-3">
                              Current Value :
                          </div>
                          <div class="col-md-8">
                              <asp:TextBox CssClass="txtstyle txtwidth"  runat="server" ID="txt_Curr_Val" TextMode="MultiLine"></asp:TextBox>
                          </div>
                      </div>
                        <div class="row">
                          <div class="col-md-3">
                              New Value :
                          </div>
                          <div class="col-md-8">
                              <asp:TextBox CssClass="txtstyle txtwidth" runat="server" ID="txt_New_Val" TextMode="MultiLine"></asp:TextBox><br />
                              <asp:DropDownList  runat="server" ID="ddl_relig"></asp:DropDownList><br />
                              <asp:TextBox CssClass="txtstyle" runat="server" ID="txt_tblname" ></asp:TextBox><br />
                              <asp:TextBox CssClass="txtstyle" runat="server" ID="txt_colname"></asp:TextBox>
                          </div>
                      </div>
                       
                    </div>

尝试显示:无后

它看起来像:

我该如何解决这个问题？

感谢您的帮助

Answer 1

你可以尝试:

$('#<%=ddl_relig.ClientID%>').css('position', 'absolute')
$('#<%=ddl_relig.ClientID%>').css('left', '-9999px')