×

slidetoggle

在jQuery中显示和隐藏HTML元素的方法分别是什么?jquery slideToggle 上下滑动的时候 如果一下子点击多次 会在那不停的 上下 滑动

admin admin 发表于2022-07-10 02:44:45 浏览99 评论0

抢沙发发表评论

在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的操作就好了