正文
jquery控制隐藏,jquery 隐藏
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
jQuery控制元素显示、隐藏、切换、滑动的方法总结
jQuery
隐藏和显示
通过
hide()
和
show()
两个函数，jQuery
支持对
HTML
元素的隐藏和显示：
实例
复制代码
代码如下:
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
hide()
和
show()
都可以设置两个可选参数：speed
和
callback。
语法：
复制代码
代码如下:
$(selector).hide(speed,callback)
$(selector).show(speed,callback)
相关问答
Q1: jquery怎么实现点击一个按钮控制一个div的显示和隐藏？
示例html
div class="abc" style="display:none"/div
input type="button" class="but" /
最简单的方法：
script
$(document).ready(function(e) {
$(".but").click(function(e) {
$(".abc").toggle();
});
});
/script
toggle() 的作用就是当对象是显示的就隐藏，当是隐藏的则显示。
------
如果你除了显示和隐藏之外还需要同时实现其他功能的话，可以这样：
script
$(document).ready(function(e) {
$(".but").click(function(e) {
if( $(".abc").hasClass("show") ){
// 执行隐藏
$(".abc").hide().removeClass("show");
// 其他
}else{
// 显示
$(".abc").show().addClass("show");
}
});
});
/script
这里通过自定义一个 class : show 来判断 div 是显示或隐藏
hasClass() 是否存在某个class
hide() 隐藏对象
show() 显示对象
removeClass() 移除一个class
addClass() 添加一个class
除此，还可以通过jquery设置这个 div 的 css : display:none/block 来实现隐藏/显示
PS：jquery如何删除div里面的某个div
思路：首先获取到需要删除的对象，然后使用jQuery提供的 remove() 方法删除被选元素及其子元素。
例如，对于如下的HTML结构：
div id="test"
div id="test1"/div
div class="test2"/div
div class="test2"/div
div/div
/div
1、删除id为test1的div
首先使用id选择器获取元素，然后使用remove()函数删除，相应代码为：
$("div#test1").remove();
2、删除所有class为test2的元素
$("#test div.test2").remove(); // 或者 $("div").remove("#test .test2");
3、删除最后一个div
虽然该div没有id及class属性，但是可以从其位置关系上获取然后删除之：
$("#test div:last").remove();
Q2: 如何通过jquery隐藏和显示元素
1.JQ中显隐有以下几种方式
show(),hide(),toggle(),slideDown()然后还有css设置div的style属性都可操作
2.show()方法
显示出隐藏的 p 元素。
$(".btn2").click(function(){
$("p").show();
});
3.toggle()方法
toggle() 方法切换元素的可见状态。
如果被选元素可见，则隐藏这些元素，如果被选元素隐藏，则显示这些元素。
html
head
script type="text/javascript" src="/jquery/jquery.js"/script
script type="text/javascript"
$(document).ready(function(){
$(".btn1").click(function(){
$("p").toggle(1000);
});
});
/script
/head
body
pThis is a paragraph./p
button class="btn1"Toggle/button
/body
/html
3.slideDown()方法
以滑动方式显示隐藏的 p 元素：
$(".btn2").click(function(){
$("p").slideDown();
});
4.hide() 方法
隐藏可见的 p 元素：
$(".btn1").click(function(){
$("p").hide();
});
这个函数经常与show一起使用
5.css()方法
css() 方法设置或返回被选元素的一个或多个样式属性。
返回 CSS 属性
如需返回指定的 CSS 属性的值，请使用如下语法：
css("propertyname");
$("p").css("display","none");
实例：
!DOCTYPE
html
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
script type="text/javascript"
$(document).ready( function(){});
function hiden(){
$("#divObj").hide();//hide()函数,实现隐藏,括号里还可以带一个时间参数(毫秒)例如hide(2000)以2000毫秒的速度隐藏,还可以带slow,fast
}
function slideToggle(){
$("#divObj").slideToggle(2000);//窗帘效果的切换,点一下收,点一下开,参数可以无,参数说明同上
}
function show(){
$("#divObj").show();//显示,参数说明同上
}
function toggle(){
$("#divObj").toggle(2000);//显示隐藏切换,参数可以无,参数说明同上
}
function slide(){
$("#divObj").slideDown();//窗帘效果展开
}
/script
/head
body
h3div里内容的显示隐藏特效/h3
input type="button" value="隐藏" onclick="hiden()"/
input type="button" value="显示" onclick="show()"/
input type="button" value="窗帘效果显示2" onclick="slide()"/
input type="button" value="窗帘效果的切换" onclick="slideToggle()"/
input type="button" value="隐藏显示效果切换" onclick="toggle()"/
div id="divObj" style="display:none"
1.测试例子br/
2.测试例子br/
3.测试例子br/
4.测试例子br/
5.测试例子br/
6.测试例子br/
7.测试例子br/
8.测试例子br/
9.测试例子br/
0.测试例子br/
/div
/body
/html
Q3: Jquery实现显示和隐藏的4种简单方式
Html代码：
复制代码
代码如下:
div
class="topicList"
h3span学习天地/span/h3
ul
li1111111111/li
li2222222222/li
li333333333/li
li4444444444/li
li5555555555/li
li6666666666/li
/ul
/div
Jquery代码：
第一种实现方式：
复制代码
代码如下:
1.
script
type="text/javascript"
$(function(){
$(".topicList
h3").click(function(){
var
UL
=
$(this).next("ul");
if(UL.css("display")=="none"){
UL.css("display","block");
}
else{
UL.css("display","none");
}
});
});
/script
第二种实现方式：
复制代码
代码如下:
2.
script
type="text/javascript"
$(function(){
$(".topicList
h3").toggle(function(){
$(this).next("ul").hide(1000);
},function(){
$(this).next("ul").show(1000);
});
});
/script
第三种实现方式：
可以使用Jquery提供的show和hide来完成带缓动的显示和隐藏效果，由于两个方法相似，可以直接使用toggle来完成。
复制代码
代码如下:
3.
script
type="text/javascript"
$(function(){
$(".topicList
h3").toggle(function(){
$(this).next("ul").css("display","none");
},function(){
$(this).next("ul").css("display","block");
});
});
/script
第四种实现方式：
toggle如果有两个参数，并且都是函数，表示第一次点击执行第一个函数，第二次点击执行第二个函数。
复制代码
代码如下:
4.
script
type="text/javascript"
$(function(){
$(".topicList
h3").toggle(topicHandler,topicHandler);
function
topicHandler(){
//使用fadeIn、show、slideDown可以完成某个容器的显示
//使用fadeOut、hide、slideUp可以完成某个容器的隐藏
//所以可以通过各个的toggle来完成两个之间的轮换
$(this).next("ul").toggle(1000);
}
});
/script
