merge channel.js

@@ -64,6 +64,18 @@ $(window).scroll(function() {
     });
 });
 
+function changeBackground() {
+    var $brandList = $('.brand-list').find('p');
+
+    $brandList.on('touchstart', function() {
+        $brandList.css('background', '#fff');
+        $(this).css('background', '#eee');
+    }).on('touchend touchcancel', function() {
+        $(this).css('background', '#fff');
+    });
+}
+changeBackground();
+
 function searchResult() {
     var keyword = ($keyword.val() + '').toLowerCase();
     var result = {},
@@ -113,6 +125,7 @@ function searchResult() {
 
     // 插入 dom，绑定事件
     $('.search-result').html(html);
+    changeBackground();
 }
 
 if ($('.brand-search-page').length) {

@@ -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;
-});
\ No newline at end of file
+$subLevelItem.on('touchstart', function() {
+    $subLevelItem.removeClass('highlight');
+    $(this).addClass('highlight');
+}).on('touchend touchcancel', function() {
+    $(this).removeClass('highlight');
+});

@@ -94,6 +94,14 @@ $subNav.each(function () {
     }
 });
 
+// 侧边栏点击背景色变化
+$sideNav.children('ul').children('li').on('touchstart', function() {
+    $sideNav.children('ul').children('li').css('background', '#fff');
+    $(this).css('background', '#eee');
+}).on('touchend touchcancel', function() {
+    $(this).css('background', '#fff');
+});
+
 //头部banner轮播
 if ($('.banner-swiper').find('li').size() > 1) {
     bannerSwiper = new Swiper('.banner-swiper', {

@@ -8,7 +8,8 @@ var $ = require('jquery');
 var $searchBox = $('.search-box'),
     $box = $('.box'),
     $indexSearch = $('.index-search'),
-    $indexLogo = $('.index-logo');
+    $indexLogo = $('.index-logo'),
+    $channelLink = $('.index-channel a');
 
 var $search = $searchBox.children('input[type="text"]'),
     $cancelSearch = $box.children('.no-search'),
@@ -42,6 +43,26 @@ $searchBox.children('.search-icon').on('touchstart', function() {
     $indexSearch.submit();
 });
 
-$('.index-channel img').on('load', function() {
-    window.rePosFooter();
+$('.index-channel img').on('load error', function() {
+    window.rePosFooter && window.rePosFooter();
+});
+
+$channelLink.on('touchstart', function() {
+    $channelLink.css({
+        background: '#000',
+        color: '#fff',
+        borderColor: '#fff'
+    });
+    $(this).css({
+        background: 'rgba(255, 255, 255, 0.5)',
+        color: '#000',
+        borderColor: '#000'
+    });
+}).on('touchend touchcancel', function() {
+    $(this).css({
+        background: '#000',
+        color: '#fff',
+        borderColor: '#fff'
+    });
+
 });

@@ -24,6 +24,18 @@ function showFilter() {
     $filter.removeClass('hide');
 }
 
+// 子菜单点击时背景高亮
+function highlightSubItem() {
+    var $subItem = $('.filter-body .sub-item');
+
+    $subItem.on('touchstart', function() {
+        $subItem.removeClass('highlight');
+        $(this).addClass('highlight');
+    }).on('touchend touchcancel', function() {
+        $(this).removeClass('highlight');
+    });
+}
+
 //主筛选项Tap事件句柄
 function classifyTapEvt($this) {
     if ($this.hasClass('active')) {
@@ -95,7 +107,7 @@ function initFilter(opt) {
     hCbFn = opt.hCbFn;
 
     missStatus = opt.missStatus;
-
+    highlightSubItem();
 
     $filter = $('.filter-mask');
 
@@ -131,6 +143,7 @@ function initFilter(opt) {
             }
         }
     });
+
 }
 
 //重置筛选面板

@@ -59,18 +59,23 @@
         display: none;
         width: 50%;
         height: 440px;
-        padding-left: 15px;
         left: 50%;
         top: 0;
         overflow: auto;
+        -webkit-overflow-scrolling: touch;
 
         > li {
             height: 60px;
             line-height: 60px;
+            padding-left: 15px;
             border-bottom: 1px solid #e6e6e6;
             overflow: hidden;
             white-space: nowrap;
             text-overflow: ellipsis;
+
+            &.highlight {
+                background: #eee;
+            }
         }
 
         .chosed-icon {

@@ -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

@@ -50,12 +50,16 @@
             color: #999;
         }
 
+        .active {
+            background: #eee;
+        }
+
         .active > a {
             color: #000;
             .spanTest{
                 width: auto;
                 height: 100%;
-                border-bottom: 2px solid #000;
+                // border-bottom: 2px solid #000;
                 display: inline-block;
                 box-sizing:border-box;
             }

@@ -206,11 +206,15 @@
             box-sizing: border-box;
         }
 
+        .active {
+            background: #eee;
+        }
+
         .active > a {
             color: #000;
 
             .nav-txt {
-                border-bottom: 2px solid #000;
+                // border-bottom: 2px solid #000;
             }
 
             .iconfont {

@@ -51,8 +51,12 @@
             color: #999;
         }
 
+        .active {
+            background: #eee;
+        }
+
         .active > a {
-            border-bottom: 2px solid #000;
+            // border-bottom: 2px solid #000;
             color: #000;
             box-sizing:border-box;
         }