jq 切换功能toggle

Posted 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

jq简单实现切换隐藏与显示同时切换图标

jq 版的tab切换

jq指定行切换

JQ动画完成后切换类[重复]