商品分类 条目背景色

@@ -9,10 +9,10 @@ var $ = require('jquery'),
 
 var $nav = $('.category-nav'),
     $categoryContainer = $('.category-container'),
-    $contents = $categoryContainer.children('.content');
+    $contents = $categoryContainer.children('.content'),
+    $subLevelItem = $('.sub-level li');
 
-var $curContent = $contents.not('.hide'),
-    $curClickSubLevel;
+var $curContent = $contents.not('.hide');
 
 var navHammer, ccHammer;
 
@@ -71,13 +71,9 @@ ccHammer.on('tap', function(e) {
     }
 });
 
-$('.sub-level').bind('touchend', function(e) {
-    var $cur = $(e.target);
-
-    $cur.addClass('a-highlight');
-
-    if ($curClickSubLevel) {
-        $curClickSubLevel.removeClass('a-highlight');
-    }
-    $curClickSubLevel = $cur;
+$subLevelItem.on('touchstart', function() {
+    $subLevelItem.removeClass('highlight');
+    $(this).addClass('highlight');
+}).on('touchend touchcancel', function() {
+    $(this).removeClass('highlight');
 });

@@ -95,7 +95,6 @@
     .sub-level-container {
         float: left;
         box-sizing: border-box;
-        padding-left: 20rem / $pxConvertRem;
         background: #fff;
         width: 60%;
         height: 100%;
@@ -112,6 +111,11 @@
             height: 71rem / $pxConvertRem;
             line-height: 71rem / $pxConvertRem;
             border-bottom: 1px solid #e6e6e6;
+            padding-left: 20rem / $pxConvertRem;
+            
+            &.highlight {
+                background: #eee;
+            }
 
             &:last-child {
                 border-bottom: none;
@@ -126,7 +130,4 @@
         }
     }
     
-     .a-highlight {
-         text-decoration: underline;
-    }
 }
\ No newline at end of file