如何使用jquery使一个不可见的控件可见？（隐藏和显示无效）

Question

我该如何使用jQuery更改控件的可见性？我有一个控件，将其可见属性设置为false（不是CSS）。

当我对它使用show()函数时，什么也没发生，似乎hide()和show()方法是针对控件的CSS设置，而非可见属性。

- SilverLight

Answer 1

在jQuery中无法做到这一点，在asp.net中visible="false"表示控件未呈现在页面中。如果要使控件在客户端显示，需要使用style="display: none;"让它真正出现在HTML中，否则客户端将没有任何东西可显示，因为该元素不在服务器发送的HTML中。

如果删除visible属性并添加style属性，然后可以使用jQuery来显示它，如下所示:

$("#elementID").show();

修正后的回答（在patrick捕获之后）

要更改元素的可见性，需要使用.css()，如下：

$("#elem").css('visibility', 'visible');

除非你需要占用页面空间，否则在CSS中使用display: none;而不是visibility: hidden;，然后只需执行以下操作：

$("#elem").show();

.show() 和 .hide() 函数处理的是 display 而不是 visibility，和大多数 jQuery 函数一样 :)

- Nick Craver

---

原帖中提到了“(not css)”。虽然我无法想象这是什么意思。 - user113716

@patrick - 哦，那是ASP.Net的事情，完全不同的答案，我会更新的。 - Nick Craver

这对我来说非常糟糕......想象一下，我有两个相邻的按钮，当其中一个不可见时（从代码后台），另一个可以填充它的空间，这正是我想要的...... 我被迫为某些条件将该按钮设置为不可见，并使用jquery强制将其设置为可见并将另一个按钮设置为不可见....因此，使用CSS->隐藏控件会产生空白...如何通过可见按钮填充它？无论如何，非常感谢您的关注和回答// 最好的问候/.... - SilverLight

@LostLord - 这是回答中涉及到“显示”的部分，如果你使用display: none;而不是visibility: hidden;，那么在隐藏时它不会占用页面上的任何空间。 - Nick Craver

Answer 2

.show()和.hide()修改CSS的display规则。我认为你想要：

$(selector).css('visibility', 'hidden'); // Hide element
$(selector).css('visibility', 'visible'); // Show element

- Harold1983-

---

这对我来说非常糟糕......想象一下，我有两个相邻的按钮，当其中一个从代码后端不可见时，另一个可以填充它的空间，这正是我想要的... 我被迫为某些条件使该按钮不可见，并使用jquery强制使其可见并将另一个按钮设为不可见....所以用css->隐藏控件会留下空白...如何通过可见按钮填充它？？？无论如何，非常感谢您的关注和回答//最好的问候/... - SilverLight

Answer 3

这是我用来处理这个问题的一些代码。

首先，我们显示元素，通常会通过.show()函数将显示类型设置为“block”，然后将CSS规则设置为“visible”：

jQuery( '.element' ).show().css( 'visibility', 'visible' );

或者，假设隐藏元素的类名为hidden，例如Twitter Bootstrap中，toggleClass()可能会很有用：

jQuery( '.element' ).toggleClass( 'hidden' );

最后，如果您想链接函数，也许带有华丽的淡入效果，可以像这样做：

jQuery( '.element' ).css( 'visibility', 'visible' ).fadeIn( 5000 );

- Andy

Answer 4

已经过去了10年，不确定是否仍有人认为这个问题或答案是相关的。

但是一个快速的解决方法就是将asp控件包装在一个html容器中。

<div id="myElement" style="display: inline-block">
   <asp:TextBox ID="textBox1" runat="server"></asp:TextBox>
</div>

每当触发Javascript事件时，如果需要使用asp控件来触发事件，则只需将asp控件包装在div容器中即可。

<div id="testG">  
   <asp:Button ID="Button2" runat="server" CssClass="btn" Text="Activate" />
</div>

以下是 jQuery 代码：

$(document).ready(function () {
    $("#testG").click(function () {
                $("#myElement").css("display", "none");
     });
});

- Gary Bao 鲍昱彤