《锋利的JS》 之 单击显示隐藏

这是〈锋利的JQ〉里的第二章实例，首先，看效果：如图：

默认状态：隐藏

单击按钮显示更多。

很简单的效果，先看结构：

<style type="text/css">
    *{ margin:0; padding:0;}
    body{ font-size:12px; text-align:center;}
    a{ color:#04d; text-decoration:none;}
    a:hover{ color:#f50; text-decoration:underline;}
    .SubCategoryBox{ width:600px; margin:0 auto; text-align:center; margin-top:40px;}
    .SubCategoryBox ul{list-style:none;}
    .SubCategoryBox ul li{ float:left; width:200px; line-height:20px;}
    .showmore{ clear:both; text-align:center; padding-top:10px; zoom:1;}
    .showmore a{ display:block; width:120px; margin:0 auto; line-height:24px; border:1px solid #aaa;}
    .showmore a span{ padding-left:15px; background:url(images/down.gif) no-repeat;}
    .promoted a{ color:#f50;}
</style>
</head>
<body>
    <div class="SubCategoryBox">
        <ul>
            <li class="test"><a href="#">佳能</a><i>(30440) </i></li>
            <li><a href="#">索尼</a><i>(27220) </i></li>
            <li><a href="#">三星</a><i>(20808) </i></li>
            <li><a href="#">尼康</a><i>(17821) </i></li>
            <li><a href="#">松下</a><i>(12289) </i></li>
            <li><a href="#">卡西欧</a><i>(8242) </i></li>
            <li><a href="#">富士</a><i>(14894) </i></li>
            <li><a href="#">柯达</a><i>(9520) </i></li>
            <li><a href="#">宾得</a><i>(2195) </i></li>
            <li><a href="#">理光</a><i>(4114) </i></li>
            <li><a href="#">奥林巴斯</a><i>(12205) </i></li>
            <li><a href="#">明基</a><i>(1466) </i></li>
            <li><a href="#">爱国者</a><i>(3091) </i></li>
            <li><a href="#">其它品牌相机</a><i>(7275) </i></li>
        </ul>
        <div class="showmore">
            <a href="#"><span>显示全部品牌</span></a>
        </div>
    </div>
</body>

再看JQ代码：

$(function(){
    var $category = $('ul li:gt(5):not(:last)');
    $category.hide();
    var $toggleBtn = $('div.showmore > a');
    $toggleBtn.click(function(){
        if($category.is(":visible")){
            $category.hide();
            $('.showmore > a span').css("background","url(images/down.gif) no-repeat")
                .text("显示全部品牌");
            $('ul li').removeClass("promoted");
        }else{
            $category.show();
            $('.showmore a span')
                    .css("background","url(images/up.gif) no-repeat 0 0")
                    .text("精简显示品牌");
                $('ul li').filter(":contains('佳能'),:contains('尼康'),:contains('奥林巴斯')")
                    .addClass("promoted");
        }
        return false;
    })
})
JQ很简单不解释，接下来，是我的JS仿写。
从效果和JQ代码中，我们都可以总结出实现这功能的思路出来：
1.获取第7个li到倒数第二个li，隐藏之。
2.获取按钮a元素，单击时显示更多，并修改按钮样式和给一些内容添加样式。
直接看代码吧：
window.onload = function(){
    var list = document.getElementsByTagName('li');     //获取页面上的li
    var btn = getElementsByClassName('showmore')[0].getElementsByTagName('a')[0];   //获取按钮a
    var span = btn.getElementsByTagName('span')[0];    //获取a里面的span
    var flag = true;        //用以控制显示和隐藏切换

    showHidden(list,'none');          //一个显示隐藏函数，由于多次出现，所以弄成函数

    btn.onclick = function(){
        if(flag){
            showHidden(list,'block');                //单击时，显示出隐藏内容
            for(var i = 0,l = list.length; i < l; i++){             //遍历所有内容，寻找匹配的内容，添加样式
                var str = list[i].innerHTML;
                if(str.indexOf("佳能") != -1 || str.indexOf("尼康") != -1 || str.indexOf("奥林巴斯") != -1){
                    addClass('promoted',list[i]);
                }
            }
            span.innerHTML = "精简显示品牌";             //改变内容
            span.style.background = "url(images/up.gif) no-repeat";
            flag = false;
        }else{
            showHidden(list,'none');
            for(var i = 0,l = list.length; i < l; i++){
                var str = list[i].innerHTML;
                if(str.indexOf("佳能") != -1 || str.indexOf("尼康") != -1 || str.indexOf("奥林巴斯") != -1){
                    removeClass("promoted",list[i]);          //移除样式
                }
            }
            span.innerHTML = "显示全部品牌";
            span.style.background = "url(images/down.gif) no-repeat";
            flag = true;
        }
    }
}

function showHidden(list,type){                //显示隐藏函数
    for(var i = 6, l = list.length - 1; i < l; i++){
        list[i].style.display = type;
    }
}

function getElementsByClassName(className,node){           //通过类名获取对象
    node = node || document;
    if(node.getElementsByClassName){
        return node.getElementsByClassName(className);
    }
    var eles = node.getElementsByTagName('*');
    var reg = [];
    for(var i = 0,l = eles.length; i < l; i++){
        if(hasClass(className,eles[i])){
            reg.push(eles[i]);
        }
    }
    return reg;
}

function hasClass(className,node){         //判断对象节点是否有某个类
    var eles = node.className.split(/\s+/);
    for(var i = 0,l = eles.length; i < l; i++){
        if(eles[i] == className){
            return true;
        }
    }
    return false;
}

function addClass(className,node){          //添加样式
    return node.className += " " + className;
}

function removeClass(className,node){         //删除样式
    eles = node.className.split(/\s+/);
    for(var i = 0,l = eles.length; i < l; i++){
        if(eles[i] == className){
            eles.splice(i,1);
        }
    }
    node.className = eles.join(" ");
    return node;
}
posted @ 2011-05-03 09:57  肥杜  阅读(2279)  评论(0)    收藏  举报