Question

在我的应用程序中，我有一个html按钮，我需要在按钮单击时隐藏div中的几个元素，并再次显示相同的元素，单击相同的按钮，我就可以隐藏div，但如何再次显示div元素。Belo是我的html和jquery代码

HTML

<button type="button" id="btnsearch" style="background-color: white">Search</button>
<div id="Show"></div>

jQuery

$("#btnsearch").click(function () {
        $("#Show").hide();
    });

Answer 1

在jquery中使用.toggle（）

$("#btnsearch").click(function () {
        $("#Show").toggle();
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" id="btnsearch" style="background-color: white">Search</button>
<div id="Show">ff</div>

Answer 2

您可以将jquery toggle()函数用于任务

 $("#btnsearch").click(function(){
    $("#Show").toggle();
  });

使用jquery toggle（）函数将自动隐藏和显示目标元素#Show

Answer 3

尝试一下

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

div {
height:200px;
width:200px;
background-color:red;
}

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</head>
<body>

<div id="toggle">
</div>

<button>Toggle between hide() and show()</button>

</body>
</html>

如何使用jQuery在按钮单击上显示和隐藏div

3 个答案: