那其实在这里呢，也就是这样实现的，看一下效果。

其实这里我是写死的静态页面。OK，我们接着看下面的手机酷站，每日资讯等等可以折叠展开的Collapse panel的实现。

                
                    
手机酷站
                    

                        
                            
                                
                                    `website`.`name`
                                
                            
                        
                    
                
                
                    
每日资讯
                    
Collapsible content
                
                
                    
生活服务
                    
Collapsible content
                
                
                    
天猫精选
                    
Collapsible content
                
                
                    
轻松大杂烩
                    
Collapsible content
                
            

其实在这里我们使用了Jquery Mobile中的collapsible-set，我们可以在这个set中添加我们的collapsible元素。在这里需要注意每个collapsible中只能是

标签，如果改成其他标签则不能被识别。OK，我们看一下效果，不同的主题，不同的感觉。

看起来虽然没有原图好看，但是也凑合能看，其实在这里我也尝试找到一些接口去修改展开图标或者展开头部的样式，但是发现并没有那么好改。所以个人觉得还是没bootstrap做的好。

ok，最后，我们再看看手机酷站展开后的内容，代码如下

                    
手机酷站
                    

                        
                            
                                
                                    `website`.`name`
                                
                            
                        
                    
                

在这里我们使用了angular.js这个优秀的js前端框架。大家注意到我们在页面的html标签上标记了ng-app，这样该页面才能被angular.js识别。然后我们在div上又标记了ng-controller="websiteController"，这个标记是告诉angular.js当加载该标签时，去调用websiteController这个js控制器。那么这个js控制器在哪呢，在页面底部。

        function websiteController($scope) {
            $scope.webistes =
                [
                    { block: "a", name: "1号店", link: "http://www.baidu.com" }, { block: "b", name: "天猫", link: "http://www.baidu.com" },
                    { block: "c", name: "抢车票", link: "http://www.baidu.com" }, { block: "d", name: "小米", link: "http://www.baidu.com" },
                    { block: "a", name: "唯品会", link: "http://www.baidu.com" }, { block: "b", name: "QQ空间", link: "http://www.baidu.com" },
                    { block: "c", name: "乐讯", link: "http://www.baidu.com" }, { block: "d", name: "搜房网", link: "http://www.baidu.com" },
                    { block: "a", name: "汽车之家", link: "http://www.baidu.com" }, { block: "b", name: "去哪儿", link: "http://www.baidu.com" },
                    { block: "c", name: "智联招聘", link: "http://www.baidu.com" }, { block: "d", name: "太平洋车", link: "http://www.baidu.com" },
                    { block: "a", name: "携程", link: "http://www.baidu.com" }, { block: "b", name: "百姓网", linhk: "ttp://www.baidu.com" },
                    { block: "c", name: "UC书城", link: "http://www.baidu.com" }, { block: "d", name: "京东", link: "http://www.baidu.com" }
                ];
        }
    

在这里我们定义了网站以及连接，还有前面的block是什么呢，其实是为了布局用的(ui-block-x)。在这里我们在作用域中定义了一个json数组，然后这个json数据在标记ng-controller的div被加载的时候被循环加入到该div中的一个div中。

这段代码含义就是循环json对象数组(ng-repeat="website in webistes")，然后根据json数组中的block属性(class="ui-block-`website`.`block`")，来决定加入哪一个网格。其实在angularjs中，双大括号表示输出，所以我们最后的元素生成后，查看源码如下

大家注意到，其实就是ui-block-a,ui-block-b....，大家可能在这里有个疑问，为什么所有的ui-block-x都在一个ui-grid-c中还能显示正常，不是说分四列吗，这都塞了16列了。大家注意，如果是下一批ui-block-a....，那么它会重新起一行，不会在一行。OK，我们看一下效果

OK，成功了，好了，今天就到这里，我们最后再看一下整体的效果。

这篇文章的代码基本都已经贴上来了，如果谁需要源码，请给我留言。

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。