jq 切换功能toggle

Posted 2021-01-26 liaohongwei

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jq 切换功能toggle相关的知识，希望对你有一定的参考价值。

---恢复内容开始---

$(document).ready(function () {

　　$(".jianjie").click(function () {

　　　　$(this).toggleClass("brief");//切换类名，在一个类名上增加、删除类名

　　});

　　$(".jj_v").click(function () {

　　　　$(".none_v").slideToggle("slow");//点击滑动显示、隐藏

　　});

　　$(".jj_v").click(function () {

　　　　$(".none_v").fadeToggle(1000);//点击淡入、淡出

　　});

　　$(".jj_v").click(function () {

　　　　$(".none_v").toggle();//点击显示、隐藏

　　});

　　var a = 0;

　　$(".jj_v").click(function () {

　　　　　　a++;

　　　　if(a%2){

　　　　　　　　$(".none_v").show(1000);//1秒展开

　　　　　　　　$(".none_v").fadeIn("slow");//淡入

　　　　}else{

　　　　　　　　$(".none_v").hide(1000);//1秒隐藏

　　　　　　　　$(".none_v").fadeOut("1000");//淡出

　　　　 }

});

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
　　$("button").click(function(){
　　　　$("#div1").fadeTo("slow",0.15);//透明度
　　　　$("#div2").fadeTo("slow",0.4);
　　　　$("#div3").fadeTo("slow",0.7);
　　});
});
</script>
</head>

<body>

<p>演示带有不同参数的 fadeTo() 方法。</p>
<button>点击这里，使三个矩形淡出</button>
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
<br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div>
<br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>

</body>
</html>

---恢复内容结束---

以上是关于jq 切换功能toggle的主要内容，如果未能解决你的问题，请参考以下文章

mat-slide-toggle Angular Material 以编程方式切换

原生JavaScript写出日历功能无引用Jq