正文
jquery点击显示隐藏,jquery点击显示隐藏切换
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
如何通过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
相关问答
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怎么实现点击显示，再一次点击隐藏
用jquery实现点击显示，再一次点击隐藏的方法是使用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
代码解读：
$(".btn1").click(function(){
$("p").toggle(1000); //控制文件This is a paragraph的显示和隐藏，如果当前是显示的，点击就隐藏了。
});
Q3: jQuery里面隐藏和显示效果怎么写?
1、jquery.show()和jquery.hide()方法
语法：
$(selector).show(speed,callback);
$(selector).hide(speed,callback);
2、jquery.toggle()方法
语法：
$(selector).toggle(speed,callback);
3、带有淡入淡出效果的显示和隐藏
$(selector).fadeIn(speed,callback)
$(selector).fadeOut(speed,callback)
$(selector).fadeToggle(speed,callback)
$(selector).fadeTo(speed,opacity,callback)
4、带有滑动效果的显示和隐藏
$(selector).slideDown(speed,callback)
$(selector).slideUp(speed,callback)
$(selector).slideToggle(speed,callback)
注意：
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
Q4: jequery如何在点击一个按钮时使用jquery隐藏一个元素
jequery在点击一个按钮时使用jquery隐藏一个元素是jQuery提供了toggle()函数用于切换显示和隐藏：显示被隐藏的元素，隐藏已显示的元素，示例代码。
拓展资料：
html代码如下：其中有一个button和一个div
input type="button" value="button"/
div id="mydiv"/div2.
js代码如下：
$(function(){
$('input:button').click(function(){ $('div').fadeToggle() }
Q5: 默认隐藏一部分内容,点击展开显示更多,这种效果jquery怎么做?
这个功能其实很容易实现，我在这告诉你思路一个思路和步骤：
1、把要显示的原样输出，作为更多要隐藏的内容你就用style="display:none"属性把它先隐藏；
2、给查看更多绑定点击事件，点击后show你要展示的内容；
实际代码如下：html 代码
Jquery代码：
扩展资料
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。
参考资料：百度百科 jQuery
