Authored by ccbikai

商品分类 条目背景色

@@ -9,10 +9,10 @@ var $ = require('jquery'), @@ -9,10 +9,10 @@ var $ = require('jquery'),
9 9
10 var $nav = $('.category-nav'), 10 var $nav = $('.category-nav'),
11 $categoryContainer = $('.category-container'), 11 $categoryContainer = $('.category-container'),
12 - $contents = $categoryContainer.children('.content'); 12 + $contents = $categoryContainer.children('.content'),
  13 + $subLevelItem = $('.sub-level li');
13 14
14 -var $curContent = $contents.not('.hide'),  
15 - $curClickSubLevel; 15 +var $curContent = $contents.not('.hide');
16 16
17 var navHammer, ccHammer; 17 var navHammer, ccHammer;
18 18
@@ -71,13 +71,9 @@ ccHammer.on('tap', function(e) { @@ -71,13 +71,9 @@ ccHammer.on('tap', function(e) {
71 } 71 }
72 }); 72 });
73 73
74 -$('.sub-level').bind('touchend', function(e) {  
75 - var $cur = $(e.target);  
76 -  
77 - $cur.addClass('a-highlight');  
78 -  
79 - if ($curClickSubLevel) {  
80 - $curClickSubLevel.removeClass('a-highlight');  
81 - }  
82 - $curClickSubLevel = $cur; 74 +$subLevelItem.on('touchstart', function() {
  75 + $subLevelItem.removeClass('highlight');
  76 + $(this).addClass('highlight');
  77 +}).on('touchend touchcancel', function() {
  78 + $(this).removeClass('highlight');
83 }); 79 });
@@ -95,7 +95,6 @@ @@ -95,7 +95,6 @@
95 .sub-level-container { 95 .sub-level-container {
96 float: left; 96 float: left;
97 box-sizing: border-box; 97 box-sizing: border-box;
98 - padding-left: 20rem / $pxConvertRem;  
99 background: #fff; 98 background: #fff;
100 width: 60%; 99 width: 60%;
101 height: 100%; 100 height: 100%;
@@ -112,6 +111,11 @@ @@ -112,6 +111,11 @@
112 height: 71rem / $pxConvertRem; 111 height: 71rem / $pxConvertRem;
113 line-height: 71rem / $pxConvertRem; 112 line-height: 71rem / $pxConvertRem;
114 border-bottom: 1px solid #e6e6e6; 113 border-bottom: 1px solid #e6e6e6;
  114 + padding-left: 20rem / $pxConvertRem;
  115 +
  116 + &.highlight {
  117 + background: #eee;
  118 + }
115 119
116 &:last-child { 120 &:last-child {
117 border-bottom: none; 121 border-bottom: none;
@@ -126,7 +130,4 @@ @@ -126,7 +130,4 @@
126 } 130 }
127 } 131 }
128 132
129 - .a-highlight {  
130 - text-decoration: underline;  
131 - }  
132 } 133 }