首页 > 代码库 > jQuery 隐藏/显示
jQuery 隐藏/显示
1.如何隐藏部分文本（简单案例）
//样式
<style type="text/css">
div.ex {
background-color: #e5eecc;
padding: 7px;
border: solid 1px #c3c3c3;
width: 300px;
}
</style>
//jq代码
<script type="text/javascript" src="http://www.mamicode.com/js/jquery-3.1.1.js"></script>
<script type="text/javascript">
$(function() {
$(‘.hide‘).on(‘click‘, function() {//获取按钮给它添加点击事件
$(this).parents(‘.ex‘).hide(‘slow‘);//点击按钮后它的父元素隐藏 slow：缓慢隐藏，实现动画效果
//也可将slow换成数字，如hide(1000):表示隐藏的整个过程用时1000毫秒（即一秒钟）
})
})
</script>
//html代码
<body>
<h3>中国办事处</h3>
<div class="ex">
<button class="hide" type="button">隐藏</button>
<p>联系人：张先生<br /> 北三环中路 100 号<br /> 北京
</p>
</div>
<h3>美国办事处</h3>
<div class="ex">
<button class="hide" type="button">隐藏</button>
<p>联系人：David<br /> 第五大街 200 号<br /> 纽约
</p>
</div>
</body>
2.使用 hide() 和 show() 方法来隐藏和显示 HTML 元素：
//jq代码
<script type="text/javascript" src="http://www.mamicode.com/js/jquery-3.1.1.js"></script>
<script type="text/javascript">
$(function(){
$(‘#hide‘).on(‘click‘,function(){//获取隐藏按钮给它添加点击事件
$(‘#p1‘).hide(‘slow‘);//点击按钮后p标签隐藏 slow：缓慢隐藏，实现动画效果
});
$(‘#show‘).on(‘click‘,function(){//获取显示按钮给它添加点击事件
$(‘#p1‘).show(‘slow‘);//点击按钮后p标签显示 slow：缓慢显示，实现动画效果
})
})
</script>
//html代码
<body>
<button id="hide" type="button">隐藏</button>
<button id="show" type="button">显示</button>
<p id="p1">如果点击“隐藏”按钮，我就会消失。</p>
</body>
3.使用 toggle() 方法来切换 hide() 和 show() 方法。
//jq代码
<script type="text/javascript" src="http://www.mamicode.com/js/jquery-3.1.1.js"></script>
<script type="text/javascript">
$(function(){
$(‘:button‘).on(‘click‘,function(){
$(‘p‘).toggle(1000);//表示点击的时候如果p标签显示就让它隐藏，反正则显示
})
})
</script>
//html代码
<body>
<button type="button">切换</button>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
</body>
jQuery 隐藏/显示