重庆分公司,新征程启航
为企业提供网站建设、域名注册、服务器等服务
示例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 来实现隐藏/显示
div input id='input1' type='text' /div
div id='b' style='position:absolute;left:20px;top:20px;display='none''/div//自己调整left和top的值将下面的div定位在上一个div的正下方
引如jquery文件
script
$(function(){
$("#b").hide();
$("#input1").focus(function(){
$("#b").slideDown("slow");
});
$("#input1").blur(function(){
$("#b").slideUp("slow");
});
});
/script
$("div").css('display','none');//隐藏
$("div").css('display','block');//显示
$("div").hide();//隐藏
$("div").show();//显示
$("div")[0].style.display = 'none';//隐藏
$("div")[0].style.display = 'block';//隐藏
$("div").toggle()切换元素的可见状态。如果元素是可见的,切换为隐藏的;如果元素是隐藏的,切换为可见的。
$(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();//窗帘效果展开
}