Question

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

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

我在尝试使用jquery hide（）函数后试图隐藏元素：

css（＆＃39;可见性＆＃39;，＆＃39;隐藏＆＃39;）

css（＆＃39;显示＆＃39;，＆＃39;无＆＃39;）

在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')

Answer 2

问题似乎是控件之间存在换行符（<br/>）。您可以将类型样式替换为block：

.newLine
{
    display: block;
}

newLine类适用于每个元素：

<div class="col-md-8">
    <asp:TextBox CssClass="txtstyle txtwidth newLine" runat="server" ID="txt_New_Val" TextMode="MultiLine" />
    <asp:DropDownList CssClass="newLine" runat="server" ID="ddl_relig" />
    <asp:TextBox CssClass="txtstyle newLine" runat="server" ID="txt_tblname" />
    <asp:TextBox CssClass="txtstyle newLine" runat="server" ID="txt_colname" />
</div>

然后可以使用show和hide jQuery函数，并且不会在控件之间留出额外的空间：

$(document).on("click", ".edit", function () {
    ...
    if (col_name == 'relig_code') {
        $('#<%=ddl_relig.ClientID%>').show('slow');
        $('#<%=txt_New_Val.ClientID%>').hide('slow');
    }
    else {
        $('#<%=ddl_relig.ClientID%>').hide('slow');
        $('#<%=txt_New_Val.ClientID%>').show('slow')
    }
});

使用jquery隐藏元素占用页面上的空间

2 个答案: