filter logic/style change

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

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

 {{# filter}}
 {{# filter}}
-    <div id="yoho-filter">
-        <div class="filter-mask"></div>
-        <div class="filter-body">
+    <div class="filter-mask hide"></div>
+    <div class="filter-body hide">
         <ul class="classify">
         <ul class="classify">
             {{#each classify}}
             {{#each classify}}
                 <li class="classify-item">
                 <li class="classify-item">
@@ -21,5 +20,4 @@
             {{/each}}
             {{/each}}
         </ul>
         </ul>
     </div>
     </div>
-    </div>
 {{/ filter}}
 {{/ filter}}