jQuery隐藏并显示文本输入

我想在Jquery中做一个简单的函数：当点击一个按钮时显示输入文本，当它再次被点击时 – 隐藏输入文本。

 
New Group
   

这是一个惨败的部分：

 $(document).ready(function () { $("#btnNewGroup").click(function () { if ($("#newGroup").hide()) { $("#newGroup").show(); } else { $("#newGroup").hide() } }); }); 

当我单击按钮时，文本输入显示，当我再次单击它时，我希望隐藏输入文本，但没有任何反应。

Answer 1

您可以使用toggle（）来显示/隐藏

现场演示

 $("#btnNewGroup").click(function () { $("#newGroup").toggle(); }); 

您遇到的问题是您隐藏了元素而不是检查它是否被隐藏。 你可以使用:hidden像是（’：hidden’）来检查元素是否被隐藏。

 if ($("#newGroup").is(':hidden')) { $("#newGroup").show(); else $("#newGroup").hide(); 

Answer 2

if ($("#newGroup").hide())

hide函数不返回boolean值，因此您无法在if语句中使用它。 它返回一个jQuery对象，该对象始终为 true，因此您的第二个块永远不会被命中。

你可以尝试两件事：

 $(document).ready(function () { $("#btnNewGroup").click(function () { if ($("#newGroup").is(":visible")) { $("#newGroup").hide(); } else { $("#newGroup").show() } }); }); 

或者简单的切换：

 $(document).ready(function () { $("#btnNewGroup").click(function () { $("#newGroup").toggle(); }); }); 

此外，当多次使用选择器时，最好缓存元素 – 否则jQuery会在每次尝试时尝试查找元素：

 $(document).ready(function () { $("#btnNewGroup").click(function () { var $newGroup = $("#newGroup"); // Cache it here if ($newGroup.is(":visible")) { $newGroup.hide(); } else { $newGroup.show() } }); }); 

Answer 3

使用.toggle()进行隐藏，并在jquery中显示

 $("#btnNewGroup").click(function () { $("#newGroup").toggle(); }); 

Answer 4

演示

使用.toggle()函数

 $("#btnNewGroup").click(function () { $("#newGroup").toggle() }); 

---

或者使用:visible带有is() :visible伪选择器

演示

 $(document).ready(function () { $("#btnNewGroup").click(function () { if ($("#newGroup").is(":visible")) { $("#newGroup").hide(); } else { $("#newGroup").show() } }); }); 

注意： hide()函数不返回布尔值。 使用is(:visible)或是is(:hidden)

Answer 5

你需要改变

  if ($("#newGroup").hide()) { 

到（只是一个可能的解决方案）

  if ($("#newGroup").css('display')=='none') { 

因为$（“＃newGroup”）。hide（）将始终返回true。 以下是完整的代码：

 $(document).ready(function () { $("#btnNewGroup").click(function () { if ($("#newGroup").css('display')=='none') { $("#newGroup").show(); } else { $("#newGroup").hide() } }); }); 

Answer 6

看看API中的.toggle（）函数。

http://api.jquery.com/toggle/