size more

@@ -207,11 +207,18 @@
         <div class="size section {{#unless size}}hide{{/unless}}" {{#if size}}data-load="true"{{/if}}>
             <span class="title">尺码：</span>
 
-            <div class="attr-content clearfix">
-                {{# size}}
-                    <a class="attr {{#if checked}}checked{{/if}}" href="{{href}}" name="{{name}}">{{name}}</a>
-                {{/ size}}
+            <div class="attr-content size-content clearfix">
+                <div class="size-block clearfix">
+                    {{# size}}
+                        <a class="attr {{#if checked}}checked{{/if}}" href="{{href}}" name="{{name}}">{{name}}</a>
+                    {{/ size}}
+                </div>
             </div>
+
+            <span id="size-more" class="size-more hide">
+                <em>更多</em>
+                <i class="iconfont">&#xe60b;</i>
+            </span>
         </div>
 
         {{#if seniorChose}}

@@ -33,6 +33,11 @@ var moreBrandLoaded = false,
 
 var $brandMoreTxt, $brandMoreIcon;
 
+var $sizeMore = $('#size-more'),
+    $sizeMoreTxt = $sizeMore.children('em'),
+    $sizeMoreIcon = $sizeMore.children('.iconfont'),
+    $sizeContent = $sizeMore.siblings('.attr-content');
+
 // 价格相关变量
 var $udPrice = $('.ud-price-range'),
     interReg = /^\d+$/,
@@ -444,6 +449,22 @@ $seniorAttrWrap.on('mouseenter', '.attr', function() {
     }, 100);
 });
 
+$sizeMore.click(function() {
+    var $this = $(this),
+        $wrap = $this.siblings('.attr-content');
+
+    if ($wrap.hasClass('more')) {
+        $sizeMoreTxt.text('更多');
+        $sizeMoreIcon.html(moreUnicode.down);
+        $wrap.scrollTop(0);
+    } else {
+        $sizeMoreTxt.text('收起');
+        $sizeMoreIcon.html(moreUnicode.up);
+    }
+
+    $wrap.toggleClass('more');
+});
+
 // 【高级选项】多选
 $('.senior-sub').on('click', '.multi-select', function() {
     $(this).closest('.senior-sub').addClass('multi');
@@ -504,3 +525,12 @@ $('.senior-sub').on('click', '.multi-select', function() {
 
 }());
 
+(function setSizeMoreBtnDisplay() {
+    var bh = $sizeContent.height(),
+        ch = $sizeContent.children().height();
+
+    if (ch > bh) {
+        $sizeMore.removeClass('hide');
+    }
+}())
+

@@ -94,8 +94,37 @@
         -moz-user-select: none;
     }
 
-    .color .attr {
-        margin-right: 0;
+    .color {
+        .attr-content {
+            margin-right: 100px;
+        }
+
+        .attr {
+            margin-right: 0;
+        }
+    }
+
+    .size {
+        position: relative;
+
+        .size-content {
+            margin-right: 120px;
+            max-height: 62px;
+            overflow-y: hidden;
+        }
+
+        .size-content.more {
+            max-height: 150px;
+            overflow-y: auto;
+        }
+
+        .size-more {
+            position: absolute;
+            right: 92px;
+            top: 15px;
+            color: #555;
+            cursor: pointer;
+        }
     }
 
     .checked .color-block {