目录悬浮窗移动端支持

This commit is contained in:
TevinLi 2016-12-03 17:19:00 +08:00
parent 5aa9537333
commit 60eb321483
2 changed files with 23 additions and 13 deletions

View File

@ -110,11 +110,11 @@ body{position:relative;background:#e7e8eb;}
aside .contents{position:fixed;bottom:137px;right:7px;z-index:9900;height:38px;width:38px;background:#f4f5f9;border:1px solid #ccc;}
aside .contents .btn{cursor:pointer;}
aside .contents .btn svg{position:absolute;top:7px;left:7px;width:22px;height:22px;color:#aaa;}
aside .contents:hover .btn svg,aside .contents.on .btn svg{display:none;}
aside .contents.hover .btn svg,aside .contents.on .btn svg{display:none;}
aside .contents .btn span{display:none;padding:12px 0;font-family:Microsoft YaHei,STXihei,STHeiti,Verdana,Arial,Helvetica,sans-serif;line-height:14px;text-align:center;color:#aaa;}
aside .contents:hover .btn span,aside .contents.on .btn span{display:block;}
aside .contents.hover .btn span,aside .contents.on .btn span{display:block;}
aside .contents-list{display:none;position:absolute;right:36px;bottom:-1px;width:270px;max-height:500px;padding:18px;overflow:hidden;overflow-y:scroll;background:#f4f5f9;border:1px solid #ccc;}
aside .contents:hover .contents-list,aside .contents.on .contents-list{display:block;}
aside .contents.hover .contents-list,aside .contents.on .contents-list{display:block;}
aside .contents-list p{padding-bottom:5px;margin-bottom:8px;border-bottom:#ccc 1px solid;}
aside .contents-list ol{padding-left:20px;}
@ -186,15 +186,19 @@ footer .signature{position:absolute;right:40px;bottom:17px;color:#999;}
.main-sibling{padding:30px 25px 25px;}
.main-sibling p{height:22px;}
.main-sibling a{padding-right:20px;}
/* ---------- contents ---------- */
aside .contents{bottom:75px;border-radius:50%;}
aside .contents-list{right:40px;width:255px;max-height:310px;}
/* ---------- backTop ---------- */
aside .back-top{border-radius:50%;bottom:32px;}
aside .back-top:hover .back-text{display:none;}
/* ---------- footer ---------- */
footer{position:relative;width:100%;height:0;}
.signature{position:absolute;right:12px;bottom:6px;color:#ccc;}
.signature a{color:#aaa;}
/* ---------- backTop ---------- */
.back-top{border-radius:50%;bottom:32px;}
.back-top:hover .back-text{display:none;}
footer .signature{position:absolute;right:12px;bottom:6px;color:#ccc;}
footer .signature a{color:#aaa;}
}

View File

@ -39,7 +39,8 @@ $(function () {
$menuIcon = $('.menu_icon'),
$filter = $('#menuFilter'),
$filterClean = $filter.next('i'),
$contents = $('#contents');
$contents = $('#contents'),
$contentsList = $contents.children('.contents-list');
//页面基本显示与操作
(function () {
@ -142,9 +143,14 @@ $(function () {
$('#svgSymbols').append(svg);
}, 'text');
}
//目录锁定
$contents.children('.btn').on('click', function(){
$contents.toggleClass('on');
//目录悬浮窗展开折叠
$contents.children('.btn').on('click', function (e) {
$contents.toggleClass('on').removeClass('hover');
});
$contents.hover(function(){
$contents.addClass('hover');
},function(){
$contents.removeClass('hover');
});
})();