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>

原文地址:https://www.cnblogs.com/siyecao2010/p/3131603.html