filter logic/style change

@@ -7,7 +7,7 @@
 
 var $ = require('yoho.zepto');
 
-var $filter = $('#yoho-filter');
+var $filter = $('.filter-mask, .filter-body');
 
 var $classify = $filter.find('.classify'),
     $subClassify = $filter.find('.sub-classify');
@@ -29,9 +29,6 @@ function registerCbFn(cb) {
     cbFn = cb;
 }
 
-//初始化sub高度与classify高度一致
-$subClassify.height($classify.height());
-
 //设置完高度后显示sub并设置选中
 $classify.children(':first-child').addClass('active'); //T：不在HTML中使用{{#if @first}}active{{/if}}来初始化active为避免sub设置高度时的闪烁
 
@@ -49,7 +46,7 @@ $classify.delegate('.classify-item', 'touchstart', function() {
 });
 
 //点击Mask隐藏筛选界面
-$filter.children('.filter-mask').click(function() {
+$filter.filter('.filter-mask').click(function() {
     hideFilter();
 });
 

@@ -11,17 +11,18 @@
 }
 
 .filter-body {
-    position: relative;
     background: #fff;
     color: #000;
     cursor: pointer;
     font-size: 14px;
+    height: 440px;
     
     .classify {
         width: 50%;
+        height: 100%;
+        background: #f8f8f8;
 
         > li {
-            background: #f8f8f8;
             height: 60px;
             line-height: 60px;
 
@@ -56,6 +57,7 @@
         position: absolute;
         display: none;
         width: 50%;
+        height: 440px;
         padding-left: 15px;
         left: 50%;
         top: 0;
@@ -68,10 +70,6 @@
             overflow: hidden;
             white-space: nowrap;
             text-overflow: ellipsis;
-
-            &:last-child {
-                border-bottom: none;
-            }
         }
 
         .chosed-icon {

 {{# filter}}
-    <div id="yoho-filter">
-        <div class="filter-mask"></div>
-        <div class="filter-body">
-            <ul class="classify">
-                {{#each classify}}
-                    <li class="classify-item">
-                        <p class="shower{{#if default}} default{{/if}}">
-                            <span class="title">{{title}}：</span>
-                            {{name}}
-                        </p>
-                        <ul class="sub-classify" data-type={{dataType}}>
-                            {{# subs}}
-                                <li {{#if chosed}}class=chosed{{/if}} data-id={{dataId}}>
-                                    {{name}}
-                                    <i class="iconfont chosed-icon">&#xe617;</i>
-                                </li>
-                            {{/ subs}}
-                        </ul>
-                    </li>
-                {{/each}}
-            </ul>
-        </div>
+    <div class="filter-mask hide"></div>
+    <div class="filter-body hide">
+        <ul class="classify">
+            {{#each classify}}
+                <li class="classify-item">
+                    <p class="shower{{#if default}} default{{/if}}">
+                        <span class="title">{{title}}：</span>
+                        {{name}}
+                    </p>
+                    <ul class="sub-classify" data-type={{dataType}}>
+                        {{# subs}}
+                            <li {{#if chosed}}class=chosed{{/if}} data-id={{dataId}}>
+                                {{name}}
+                                <i class="iconfont chosed-icon">&#xe617;</i>
+                            </li>
+                        {{/ subs}}
+                    </ul>
+                </li>
+            {{/each}}
+        </ul>
     </div>
 {{/ filter}}
\ No newline at end of file