jQuery笔记1 toggle方法

toggle方法特别实用，很多时候在页面中都会用到，例如：

点击切换位置、显示隐藏元素

其实就是无限的来回切换0和1两种状态，使用起来比if好用太多了！

例如：

点击切换标签的背景颜色

    //记得载入jQuery库
    <script src="js/jquery-1.3.1.min.js" type="text/javascript" charset="utf-8"></script>
    
    <p>点我切换</p>
    
    <script type="text/javascript">
        //先用jq给这个p标签设置一个初始的背景颜色和样式
        $("p").css({"background":"yellow","text-align":"center","padding":"10px"});
        
        //创建一个jq变量，存储p标签点击事件
        var $p = $("p").click();
        
        $p.toggle(function(){                   //方法1
            $p.css("background","red");
        },function(){                           //方法2
            $p.css("background","yellow");
        })
    </script>

点击显示隐藏分类目录

先看看效果：

这个功能还是比较实用的，可以用在栏目显示全部和隐藏部分的地方。

    //记得载入jQuery库
    <script src="js/jquery-1.3.1.min.js" type="text/javascript" charset="utf-8"></script>

    //随便写的css，只是为了方便观察
    <style type="text/css">
        li{float: left; margin: 10px;list-style-type: none}
        .clear{clear: both;}
        p{text-align: center;}
    </style>
    
    //分类目录的html代码
    <ul id="brand">
        <li>Samsung</li>
        <li>iPhone</li>
        <li>Sony</li>
        <li>LeTV</li>
        <li>360</li>
        <li>LG</li>
        <li>TCL</li>
        <li>Huawei</li>
        <li>ASUS</li>
        <li>Cube</li>
        <li>Tenda</li>
        <li>samsung</li>
        <li>Lenovo</li>
        <li>OPPO</li>
        <li>Meizu</li>
        <li>Xiaomi</li>
        <li>Other</li>
    </ul>
    <div class="clear"></div>
    <p class="more" href="#">&darr; 显示全部</p>
    
    <script type="text/javascript">
        //选中除了前七个栏目和最后一个栏目外的其余栏目赋值给一个JQ变量（为什么是七个？因为这是数组，数组的起始值是0，所以gt(6)是大于七个以上的）
        var $category =$("#brand li:gt(6):not(:last)")；
            //默认先将这些栏目隐藏
            $category.hide();
        //定义一个JQ变量存放控制区域点击事件
        var $more = $(".more").click();
            $more.toggle(function(){
                //隐藏
                $category.hide();
                //修改控制区文本内容
                $more.text("↓ 显示全部");
                //移除高亮的class
                $("ul li").removeClass("high");
            },function(){
                //显示
                $category.show();
                //修改控制区文本内容
                $more.text("↑ 精简显示");
                //为栏目中重要的栏目加上高亮class
                $("ul li").filter(":contains('Samsung'),:contains('Xiaomi'),:contains('LG')").addClass("high");
            })
    </script>

当然，这个地方还可以实用if判断$category这个变量的显示状态来控制，原理都差不多的。

    <script type="text/javascript">
        var $category =$("#brand li:gt(6):not(:last)");
        $category.hide();
        var $more = $(".more");
        $more.click(function(){
            if ($category.is(":visible")) {         
                $category.hide();
                $more.text("↓ 显示全部");
                $("ul li").removeClass("high");
             } else{
                $category.show();
                $more.text("↑ 精简显示");
                $("ul li").filter(":contains('Samsung'),:contains('Xiaomi'),:contains('LG')").addClass("high");
            }
            return false;  
        })
    </script>