在jQuery中显示和隐藏HTML元素的方法分别是什么
显示:
$(’选择器’).show()
或者$(’选择器’).slideShow()
隐藏:
$(’选择器’).hide()
或者$(’选择器’).slideHide()
显示/隐藏 切换
$(’选择器’).toggle()
或者$(’选择器’).slideToggle()
jquery slideToggle 上下滑动的时候 如果一下子点击多次 会在那不停的 上下 滑动
用判断语句is(“:animated“),我给你两段代码你自己试试
这一段是有问题的:
《html》
《head》
《meta http-equiv=“Content-Type“ content=“text/html; charset=utf-8“ /》
《script type=“text/javascript“ src=“jquery.js“》《/script》
《script type=“text/javascript“》
$(document).ready(function(){
$(“.flip“).click(function(){ //********问题点在这里,这里没有判断是否处于动画
$(“.panel“).slideToggle(“slow“);
});
});
《/script》
《style type=“text/css“》
div.panel, p.flip
{
width:200px;
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel
{
width:200px;
height:150px;
display:none;
}
《/style》
《/head》
《body》
《p class=“flip“》显示/隐藏《/p》
《div class=“panel“》
《p》Because time is valuable, we deliver quick and easy learning.《/p》
《p》You can study everything you need to learn, in an accessible and handy format.《/p》
《/div》
《/body》
《/html》
这一段是没问题的:
《html》
《head》
《meta http-equiv=“Content-Type“ content=“text/html; charset=utf-8“ /》
《script type=“text/javascript“ src=“jquery.js“》《/script》
《script type=“text/javascript“》
$(document).ready(function(){
$(“.flip“).click(function(){
if(!$(“.panel“).is(“:animated“)){ //********问题点在这里,这里有判断是否处于动画
$(“.panel“).slideToggle(“slow“);
}
});
});
《/script》
《style type=“text/css“》
div.panel, p.flip
{
width:200px;
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel
{
width:200px;
height:150px;
display:none;
}
《/style》
《/head》
《body》
《p class=“flip“》显示/隐藏《/p》
《div class=“panel“》
《p》Because time is valuable, we deliver quick and easy learning.《/p》
《p》You can study everything you need to learn, in an accessible and handy format.《/p》
《/div》
《/body》
《/html》
希望能够帮助到你
-slidetoggle
怎样用原生JS去实现jq的slideToggle
可以用CSS3 的transform跟transtion去做,
具体的就是先写好一个class,里面有一些元素的状态改变。
然后编写一个增加class跟删除class的操作就好了