Question

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

<div>
  <div id="btnNewGroup">New Group</div>
  <input type="text" id="newGroup" style="display:none" />
</div>

这是一个惨败的部分：

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

     else {
           $("#newGroup").hide()
     }
  });
});

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

Answer 1

您可以使用toggle()来显示/隐藏

<强> Live Demo

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

您遇到的问题是您隐藏了元素而不是检查它是否被隐藏。 is与:hidden之类的if ($("#newGroup").is(':hidden')) { $("#newGroup").show(); else $("#newGroup").hide();可以（＆＃39;：隐藏＆＃39;）来检查元素是否隐藏。

{{1}}

Answer 2

if ($("#newGroup").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

<强> Demo

使用.toggle()功能

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

});

或使用 :visible is()

<强> Demo

$(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/

jQuery隐藏并显示文本输入

6 个答案: