字体详情页对过长的字体名列表进行初始化收缩

css/theme.css

@@ -1123,13 +1123,42 @@ a.padding {
     clear: both;
 }
 
+.fonts-navigation {
+    position: relative;
+}
+
 #fontList {
-    display: block;
-    margin-bottom: 15px;
+    margin-bottom: 30px;
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
     justify-content: space-between;
+    padding: 0px 10px;
+    -webkit-transition: 0.2s;
+    transition: 0.2s;
+}
+
+.overflow-hidden {
+    max-height: 84px;
+    overflow: hidden;
+}
+
+.arrow {
+    width: 20px;
+    height: 20px;
+    background-size: cover;
+    position: absolute;
+    left: 50%;
+    margin-left: -10px;
+    bottom: -20px;
+}
+
+.arrow.down {
+    background-image: url(../images/arrow-down.svg);
+}
+
+.arrow.up {
+    background-image: url(../images/arrow-up.svg);
 }
 
 #fontList a,

font.html

@@ -48,7 +48,7 @@
                             <a href="javascript:" longdesc="shouhui">手绘</a>
                         </div>
                         <div id="fontList" class=""></div>
-
+                        <div class="arrow down"></div>
 
                     </div>
                     <div class="row">
@@ -167,16 +167,38 @@
 
             /**/
             $(".fontMainTit a").on("click", function() {
+
                 $(".fontMainTit a").removeClass("on");
                 $(this).addClass("on");
                 var aimNavi = eval($(this).attr("longdesc"));
-                $("#fontList").html(aimNavi.join('\r\n'));
+                $("#fontList").html(aimNavi.join('\r\n')).removeClass('overflow-hidden');
+                initNav()
             });
 
         };
 
+        function initNav() {
+            if ($('#fontList').height() <= 84) {
+                $('.arrow').hide()
+                $('#fontList').removeClass('overflow-hidden')
+            } else {
+                $('.arrow').show().removeClass('up').addClass('down');
+                $('#fontList').addClass('overflow-hidden')
+            }
+        }
+
         $(document).ready(function() {
             insertFontNaviHtml();
+            initNav()
+            $('.arrow').on('click', function() {
+                if ($(this).hasClass('down')) {
+                    $(this).removeClass('down').addClass('up');
+                    $('#fontList').removeClass('overflow-hidden')
+                } else {
+                    $(this).removeClass('up').addClass('down');
+                    $('#fontList').addClass('overflow-hidden')
+                }
+            })
         });
     </script>
 

images/arrow-down.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#333333" d="M512 665.6c-8.533333 0-17.066667-2.133333-23.466667-8.533333L247.466667 413.866667c-12.8-12.8-12.8-32 0-44.8 12.8-12.8 32-12.8 44.8 0L512 586.666667l219.733333-219.733334c12.8-12.8 32-12.8 44.8 0 12.8 12.8 12.8 32 0 44.8L535.466667 654.933333c-6.4 6.4-14.933333 10.666667-23.466667 10.666667z"  /></svg>

images/arrow-up.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#333333" d="M753.066667 665.6c-8.533333 0-17.066667-2.133333-23.466667-8.533333L512 437.333333 292.266667 654.933333c-12.8 12.8-32 12.8-44.8 0s-12.8-32 0-44.8l241.066666-241.066666c12.8-12.8 32-12.8 44.8 0l241.066667 241.066666c12.8 12.8 12.8 32 0 44.8-4.266667 6.4-12.8 10.666667-21.333333 10.666667z"  /></svg>