jq点击隐藏与显示;toggle使用
1、打开html开发软件，新建一个html文件。如图：
2、在html代码页面中创建一个用于触发点击的事件的button按钮标签，以及显示用于显示与隐藏内容的 div 标签，并为这两个标签添加对应的class类，用于后面绑定点击事件。如图：
创建代码：
<input type="button" value="隐藏" class="btn"/>
<div class="toggle">
大家好！
</div>
3、toggle()是jquery库的一个方法，所以需要引入一个jquery库(注意：案例中使用的jquery是本地的路径)。如图：
引入jquery库代码：<script type="text/javascript" src="js/jquery-1.9.1.js" ></script>
4、在引入的jquery下面创建一个<script>标签，然后创建$(function(){}）页面载入完成后。如图：
代码：
<script type="text/javascript">
$(function(){
})
</script>
5、在页面加载完成里添加点击按钮触发<div>的显示与隐藏状态。toggle()方法自动封装了隐藏与显示状态的交互，可以直接使用即可看到效果。
代码：
$(".btn").click(function(){
$(".toggle").toggle();//显示时点击为隐藏，隐藏时点击为显示
if($(this).val() == "隐藏"){//修改按钮提示文字
$(this).val("显示")
}else{
$(this).val("隐藏")
}
})
6、保存代码后使用浏览器打开，点击button按钮会发现<div>里面的内容隐藏了，再次点击里面的内容就会显示。如图：
7、页面所有代码。可以直接复制所有代码粘贴到新建的html页面，保存后运行即可看到效果。（注意：案例中使用的jquery是本地路径，需要修改jquery的引入路径）
所有代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jq点击隐藏与显示</title>
<script type="text/javascript" src="js/jquery-1.9.1.js" ></script>
<script type="text/javascript">
$(function(){
$(".btn").click(function(){
$(".toggle").toggle();//显示时点击为隐藏，隐藏时点击为显示
if($(this).val() == "隐藏"){//修改按钮提示文字
$(this).val("显示")
}else{
$(this).val("隐藏")
}
})
})
</script>
</head>
<body>
<input type="button" value="隐藏" class="btn"/>
<div class="toggle">
大家好！
</div>
</body>
</html>