Showing
3 changed files
with
26 additions
and
52 deletions
framework @ 75bbc3b0
@@ -7,6 +7,9 @@ var $ = require('jquery'), | @@ -7,6 +7,9 @@ var $ = require('jquery'), | ||
7 | Hammer = require('hammer'), | 7 | Hammer = require('hammer'), |
8 | Swiper = require('yoho.iswiper'), | 8 | Swiper = require('yoho.iswiper'), |
9 | lazyLoad = require('yoho.lazyload'), | 9 | lazyLoad = require('yoho.lazyload'), |
10 | + $mobileWrap = $('.mobile-wrap'), | ||
11 | + $overlay = $('.overlay'), | ||
12 | + $sideNav = $('.side-nav'), | ||
10 | bannerSwiper, | 13 | bannerSwiper, |
11 | recommendSwiper, | 14 | recommendSwiper, |
12 | hotBrandsSwiper, | 15 | hotBrandsSwiper, |
@@ -28,27 +31,9 @@ require('./maybe-like'); | @@ -28,27 +31,9 @@ require('./maybe-like'); | ||
28 | 31 | ||
29 | lazyLoad($('img.lazy')); | 32 | lazyLoad($('img.lazy')); |
30 | 33 | ||
31 | -//$('img:in-viewport').trigger('appear'); | ||
32 | - | ||
33 | -//点击首页汉堡menu图标,滑出侧栏导航 | ||
34 | -// $('.nav-btn').on('tap', function (event) { | ||
35 | -// if (!$(this).hasClass('menu-open')) { | ||
36 | -// $('.mobile-wrap').addClass('menu-open'); | ||
37 | -// $('.overlay').show().css('opacity', 0.3); | ||
38 | -// $('.side-nav').addClass('on'); | ||
39 | - | ||
40 | -// //设置boy高宽,页面不能上下滑动 | ||
41 | -// $('body').css({ | ||
42 | -// height: $(window).height(), | ||
43 | -// width: '100%', | ||
44 | -// overflow: 'hidden' | ||
45 | -// }); | ||
46 | -// } | ||
47 | -// event.stopPropagation(); | ||
48 | -// }); | ||
49 | - | ||
50 | navHammer = new Hammer($('.nav-btn')[0]); | 34 | navHammer = new Hammer($('.nav-btn')[0]); |
51 | navHammer.on('tap', function(event) { | 35 | navHammer.on('tap', function(event) { |
36 | +<<<<<<< HEAD | ||
52 | if (!$(this).hasClass('menu-open')) { | 37 | if (!$(this).hasClass('menu-open')) { |
53 | $('.mobile-wrap').addClass('menu-open'); | 38 | $('.mobile-wrap').addClass('menu-open'); |
54 | $('.overlay').show().css('opacity', 0.3); | 39 | $('.overlay').show().css('opacity', 0.3); |
@@ -61,33 +46,28 @@ navHammer.on('tap', function(event) { | @@ -61,33 +46,28 @@ navHammer.on('tap', function(event) { | ||
61 | overflow: 'hidden' | 46 | overflow: 'hidden' |
62 | }); | 47 | }); |
63 | } | 48 | } |
49 | +======= | ||
50 | + $mobileWrap.addClass('menu-open'); | ||
51 | + $overlay.show().css('opacity', 0.3); | ||
52 | + $sideNav.addClass('on'); | ||
53 | + | ||
54 | + //设置boy高宽,页面不能上下滑动 | ||
55 | + $('body').css({ | ||
56 | + height: $(window).height(), | ||
57 | + width: '100%', | ||
58 | + overflow: 'hidden' | ||
59 | + }); | ||
60 | +>>>>>>> 9ef15a28755af3762f68b90623fd5e6d1a27082e | ||
64 | event.srcEvent.stopPropagation(); | 61 | event.srcEvent.stopPropagation(); |
65 | }); | 62 | }); |
66 | 63 | ||
67 | -//点击页面主体,收起侧栏导航及二级导航 | ||
68 | -// $('.mobile-wrap').on('tap', function () { | ||
69 | -// if ($(this).hasClass('menu-open')) { | ||
70 | -// $('.mobile-wrap').removeClass('menu-open'); | ||
71 | -// $('.overlay').css('opacity', 0); | ||
72 | -// $('.sub-nav').removeClass('show'); | ||
73 | -// $('.side-nav').removeClass('on'); | ||
74 | -// $('body').css({ | ||
75 | -// height: 'auto', | ||
76 | -// overflow: 'auto' | ||
77 | -// }); | ||
78 | -// setTimeout(function() { | ||
79 | -// $('.overlay').hide(); | ||
80 | -// }, 300); | ||
81 | -// } | ||
82 | -// }); | ||
83 | - | ||
84 | mobileWrapHammer = new Hammer($('.mobile-wrap')[0]); | 64 | mobileWrapHammer = new Hammer($('.mobile-wrap')[0]); |
85 | -mobileWrapHammer.on('tap', function(event) { | ||
86 | - if ($(this).hasClass('menu-open')) { | ||
87 | - $('.mobile-wrap').removeClass('menu-open'); | ||
88 | - $('.overlay').css('opacity', 0); | 65 | +mobileWrapHammer.on('tap', function(e) { |
66 | + if ($mobileWrap.hasClass('menu-open')) { | ||
67 | + $mobileWrap.removeClass('menu-open'); | ||
68 | + $overlay.css('opacity', 0); | ||
89 | $('.sub-nav').removeClass('show'); | 69 | $('.sub-nav').removeClass('show'); |
90 | - $('.side-nav').removeClass('on'); | 70 | + $sideNav.removeClass('on'); |
91 | $('body').css({ | 71 | $('body').css({ |
92 | height: 'auto', | 72 | height: 'auto', |
93 | overflow: 'auto' | 73 | overflow: 'auto' |
@@ -95,11 +75,12 @@ mobileWrapHammer.on('tap', function(event) { | @@ -95,11 +75,12 @@ mobileWrapHammer.on('tap', function(event) { | ||
95 | setTimeout(function() { | 75 | setTimeout(function() { |
96 | $('.overlay').hide(); | 76 | $('.overlay').hide(); |
97 | }, 300); | 77 | }, 300); |
78 | + e.srcEvent.stopPropagation(); | ||
98 | } | 79 | } |
99 | }); | 80 | }); |
100 | 81 | ||
101 | //点击一级导航,弹出二级导航 | 82 | //点击一级导航,弹出二级导航 |
102 | -$('.side-nav').on('touchstart', 'li', function () { | 83 | +$sideNav.on('touchstart', 'li', function () { |
103 | if ($(this).find('.sub-nav').size() > 0) { | 84 | if ($(this).find('.sub-nav').size() > 0) { |
104 | $('.sub-nav').removeClass('show'); | 85 | $('.sub-nav').removeClass('show'); |
105 | $(this).find('.sub-nav').addClass('show'); | 86 | $(this).find('.sub-nav').addClass('show'); |
@@ -114,13 +95,6 @@ $('.sub-nav').each(function () { | @@ -114,13 +95,6 @@ $('.sub-nav').each(function () { | ||
114 | }); | 95 | }); |
115 | }); | 96 | }); |
116 | 97 | ||
117 | -//二级导航样式控制 | ||
118 | -$('.sub-nav').on('mouseenter', 'li', function () { | ||
119 | - if ($(this).index() !== 0) { | ||
120 | - $(this).addClass('current').siblings().removeClass('current'); | ||
121 | - } | ||
122 | -}); | ||
123 | - | ||
124 | //头部banner轮播 | 98 | //头部banner轮播 |
125 | if ($('.banner-swiper').find('li').size() > 1) { | 99 | if ($('.banner-swiper').find('li').size() > 1) { |
126 | bannerSwiper = new Swiper('.banner-swiper', { | 100 | bannerSwiper = new Swiper('.banner-swiper', { |
@@ -33,17 +33,17 @@ | @@ -33,17 +33,17 @@ | ||
33 | line-height: 90rem / $pxConvertRem; | 33 | line-height: 90rem / $pxConvertRem; |
34 | @include background-image(linear-gradient(#323232, #414141)); | 34 | @include background-image(linear-gradient(#323232, #414141)); |
35 | position: relative; | 35 | position: relative; |
36 | - z-index: 100; | ||
37 | .iconfont { | 36 | .iconfont { |
38 | color: #fff; | 37 | color: #fff; |
39 | } | 38 | } |
40 | 39 | ||
41 | .nav-btn { | 40 | .nav-btn { |
42 | position: absolute; | 41 | position: absolute; |
43 | - left: 32rem / $pxConvertRem; | 42 | + left: 0; |
44 | top: 0; | 43 | top: 0; |
45 | bottom: 0; | 44 | bottom: 0; |
46 | z-index: 2; | 45 | z-index: 2; |
46 | + padding: 0 32rem / $pxConvertRem; | ||
47 | } | 47 | } |
48 | 48 | ||
49 | .logo { | 49 | .logo { |
-
Please register or login to post a comment