如何使用jquery显示和隐藏按钮单击时的div [重复]答案

【问题标题】：how to show and hide the div on button click using jquery [duplicate]如何使用jquery显示和隐藏按钮单击时的div [重复]
【发布时间】：2023-03-26 21:21:01
【问题描述】：

在我的应用程序中，我有一个 html 按钮，我需要在单击按钮时隐藏 div 中的几个元素，并在再次单击相同按钮时显示相同的元素我可以隐藏 div，但我怎样才能再次显示div elements.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();
    });

【问题讨论】：

为此使用toggle()

标签： jquery html

【解决方案1】：

试试这个

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

【讨论】：

【解决方案2】：

您可以使用 jquery toggle() 函数来完成任务

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

通过使用jquery toggle() 函数会自动隐藏和显示目标元素#Show

【讨论】：

【解决方案3】：

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

【讨论】：

请不要重复回答，而是这样标记。