想必显示和隐藏的效果大家都有见到过吧，其实很简单，jquery便可轻松实现（想用JS的我也不拦着，萝卜白菜各有所爱哈~），下面为大家整理了多种方式，可以根据需求自由选择。
明确思路
获取元素，判断点击，如果元素是可见的，切换为隐藏；如果元素是隐藏的，切换为可见。
if( DIV是显示的 ){
div.style.display='none';
}
else{
div.style.display='block';
}
JQuery方法
首先放出HTML代码，如下
HTML代码:
<div class="divlist">
<button type="button">点击显示隐藏</button>
<ul>
<li>点击显示隐藏按钮</li>
<li>我就会实现此功能</li>
<li>点击显示隐藏按钮</li>
<li>我就会实现此功能</li>
<li>点击显示隐藏按钮</li>
<li>我就会实现此功能</li>
</ul>
</div>
方法①：使用css 的 display:none 和 display:block 来实现切换
$(function(){
$(".divlist button").click(function(){
var tab = $(this).next("ul");
if(tab.css("display")=="none"){
tab.css("display","block");
}
else{
tab.css("display","none");
}
});
});
方法②：使用 toggle() 方法来切换 hide() 和 show() 方法
$(document).ready(function(){
$("button").click(function(){
$("ul").toggle(500); //括号内500参数为显示隐藏缓动时间
});
});
方法③：使用 hide() 和 show() 方法来切换并点击更换文字（单页面单元素）
$(function(){
$('button').click(function(){
if($('ul').is(':hidden')){
$('ul').show(500);
$('button').text('点击隐藏');
}else{
$('ul').hide(500);
$('button').text('点击显示');
}
});
});
方法④：利用 .each()? 为所有匹配的元素执行动作 来实现（单页面多元素）
?HTML代码：
<span class="class0">点击显示</span>
<div id="one0">
<ul>
<li><a href="#">这里是第一个内容，你看到了么？</a></li>
<li><a href="#">这里是第一个内容，你看到了么？</a></li>
<li><a href="3">这里是第一个内容，你看到了么？</a></li>
<li><a href="#">这里是第一个内容，你看到了么？</a></li>
</ul>
</div>
<span class="class1">点击显示</span>
<div id="one1">
<ul>
<li><a href="#">这里是第二个内容，你看到了么？</a></li>
<li><a href="#">这里是第二个内容，你看到了么？</a></li>
<li><a href="#">这里是第二个内容，你看到了么？</a></li>
<li><a href="#">这里是第二个内容，你看到了么？</a></li>
<li><a href="#">这里是第二个内容，你看到了么？</a></li>
<li><a href="#">这里是第二个内容，你看到了么？</a></li>
</ul>
</div>
<span class="class2">点击显示</span>
<div id="one2">
<ul>
<li><a href="#">这里是第三个内容，你看到了么？</a></li>
<li><a href="#">这里是第三个内容，你看到了么？</a></li>
<li><a href="#">这里是第三个内容，你看到了么？</a></li>
</ul>
</div>
<span class="class3">点击显示</span>
<div id="one3">
<ul>
<li><a href="#">这里是第四个内容，你看到了么？</a></li>
<li><a href="#">这里是第四个内容，你看到了么？</a></li>
<li><a href="#">这里是第四个内容，你看到了么？</a></li>
<li><a href="#">这里是第四个内容，你看到了么？</a></li>
</ul>
</div>
CSS代码：
*{margin:0;padding:0;}
a{text-decoration: none; color: #404040;}
span{display: block; height: 25px; line-height: 25px; text-align: center; border:1px solid bisque; background: yellowgreen;width:300px;color: #fff; cursor: pointer}
div{display: none; background:#ccc;color:#fff;font-size: 13px;line-height: 25px; letter-spacing: 2px;width: 300px; text-align: center;}
a:hover{ color: #fff; background: #ff9900;height:25px; line-height: 25px;}
//我在这里做的简陋，只是展示效果，样式你们自己调
jQuery代码：
$(function(){
$("span").each(function(i){
$(".class"+i).bind("click",function(){
var txt=$("#one"+i);
if(txt.is(":visible")){
$("#one"+i).hide();
$(this).text('点击显示');
}else{
$("#one"+i).show();
$(this).text('点击收起');
};
});
});
});
最重要的一点，使用jQuery方法千万不要忘记link - jQuery 库（不管是本地的还是官方的，都可以）
?<script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
JS方法
方法①：同样道理，使用 display 来判断是否为显示或隐藏状态来切换，并替换按钮文字
HTML代码:
<div>
<button type="button"?id="btn" onClick="javascript: func()">点击显示隐藏</button>
<ul id="UL" style="display: none;">
<li>点击显示隐藏按钮</li>
<li>我就会实现此功能</li>
<li>点击显示隐藏按钮</li>
<li>我就会实现此功能</li>
<li>点击显示隐藏按钮</li>
<li>我就会实现此功能</li>
</ul>
</div>
JS代码： <script language="javascript"> var div = document.getElementById("UL"); tet = document.getElementById("btn"); function func() { if (div.style.display == "block") { // 判断div是否为显示 div.style.display = "none"; // 显示状态下点击按钮隐藏 tet.innerHTML = "点击显示"; // 按钮文字同时变为“点击显示” } else{ div.style.display = "block"; // 隐藏状态下点击按钮显示 tet.innerHTML = "点击隐藏";// 按钮文字同时变为“点击隐藏”} }； </script>
方法②：同样方法，利用id所匹配的数值元素来实现div的显示隐藏
HTML代码：
<div class="divlist">
<button type="button" onclick="Show_Hidden(bt1)">点击显示隐藏</button>
<ul id="bt1" style="display: none;">
<li>点击显示隐藏按钮</li>
<li>我就会实现此功能</li>
<li>点击显示隐藏按钮</li>
<li>我就会实现此功能</li>
<li>点击显示隐藏按钮</li>
<li>我就会实现此功能</li>
</ul>
</div>
<div class="divlist">
<button type="button" onclick="Show_Hidden(bt2)">点击显示隐藏</button>
<ul id="bt2" style="display: none;">
<li>点击显示隐藏按钮</li>
<li>我就会实现此功能</li>
<li>点击显示隐藏按钮</li>
<li>我就会实现此功能</li>
<li>点击显示隐藏按钮</li>
<li>我就会实现此功能</li>
</ul>
</div>
<div class="divlist">
<button type="button" onclick="Show_Hidden(bt3)">点击显示隐藏</button>
<ul id="bt3" style="display: none;">
<li>点击显示隐藏按钮</li>
<li>我就会实现此功能</li>
<li>点击显示隐藏按钮</li>
<li>我就会实现此功能</li>
<li>点击显示隐藏按钮</li>
<li>我就会实现此功能</li>
</ul>
</div>
//我比较懒，所以就不写样式了 *.*JS代码：
function Show_Hidden(btid){
if(btid.style.display=='block'){ // 判断div是否为显示
btid.style.display='none'; // 显示状态下点击div隐藏
}else{
btid.style.display='block'; // 隐藏状态下点击div显示
}
};
以上便是 jQuery ?及 JavaScript 点击显示隐藏效果的简单整理了，个人还是推荐jQuery方法，虽然不是原生但是很方便很简洁，有需要的朋友可以参考下，希望会对大家有所帮助。
Comments | NOTHING