zoukankan      html  css  js  c++  java
  • toggleClass() 隐藏层

    
    

    toggleClass(class|fn[,sw])

    toggleClass():如果存在(不存在)就删除(添加)一个类。
    <script src="../jquery-1.7.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function(){
            
            /*点击switcher元素里任何一个元素都会执行隐藏动作*/
            $("#switcher").click(function(){
                $("#switcher a").toggleClass("hidd");
            });
            
            
            
            /*只有点击switcher1的元素才会执行隐藏动作,点a不会产生折叠效果*/
            $("#switcher1").click(function(event){
                if(event.target == this){
                    $("#switcher1 a").toggleClass("hidd");
                }
            });
            
            var count=0;
            $("p").click(function(){
                $(this).toggleClass("highlight", ++count % 3== 0);
            });
        });
    </script>
    <style type="text/css">
        #switcher{width:300px; border:1px solid #000; background-color:#CCFFFF; padding:5px; cursor:pointer;}
        #switcher span{border:1px solid #FF0000; padding:5px; display:block; cursor:pointer;}
        #switcher span a{border:1px solid #0000FF; padding:5px; display:block; cursor:pointer;}
        #switcher span a.hidd{ display:none;}
        
        #switcher1{width:300px; border:1px solid #000; background-color:#CCFFFF; padding:5px; cursor:pointer; margin-top:10px;}
        #switcher1 span{border:1px solid #FF0000; padding:5px; display:block; cursor:pointer;}
        #switcher1 span a{border:1px solid #0000FF; padding:5px; display:block; cursor:pointer;}
        #switcher1 span a.hidd{ display:none;}
        
        .highlight{ color:red;}
    </style>
    <div id="switcher" style="">
        <span style=""><a style="">点我点我</a></span>
    </div>
        
    <div id="switcher1" style="">
        <span style=""><a style="">点我点我</a></span>
    </div>
    <p>点我哈哈</p>

  • 相关阅读:
    拳击游戏(虚函数应用)
    虚函数的使用
    继承中的二义性归属问题
    继承的作用以及在子类中初始化所有数据的方法
    Exploring ES2016 Decorators
    Storage information for PWA application
    浏览器中常见网络协议介绍
    vuex所有核心概念完整解析State Getters Mutations Actions
    搭建一个webpack微服务器
    nodeJS接入微信公众平台开发
  • 原文地址:https://www.cnblogs.com/siyecao2010/p/3131603.html
Copyright © 2011-2022 走看看