diff --git a/src/assets/plugins/jquery.autoMenu.js b/src/assets/plugins/jquery.autoMenu.js
index 6e800b4d..c9c5520d 100644
--- a/src/assets/plugins/jquery.autoMenu.js
+++ b/src/assets/plugins/jquery.autoMenu.js
@@ -46,7 +46,8 @@
var height = typeof opts.height === 'number' && opts.height;
var padding = typeof opts.padding === 'number' && opts.padding;
that.$element.width(width + padding * 2);
- var html = '
';
+ var html = `
+ `;
var num = 0;
$('*').each(function() {
var _this = $(this);
@@ -105,24 +106,42 @@
},
bindEvent: function() {
var _this = this;
- $('#manual').scroll(function() {
+ $('#manual').scroll(function () {
+ _this.$element.find('input').prop('value', '')
+ _this.$element.find('li').show()
_this.setActive()
- var actived = $('#manual .active').get(0)
- if(actived) actived.scrollIntoView({ behavior: "smooth", block: "center" });
+ // scroll
+ var actived = _this.$element.find('.active')
+ if (actived.length != 0) {
+ var top = actived.offset().top
+ if (top < 0 || top > _this.settings.height) {
+ actived.get(0).scrollIntoView({ behavior: "smooth", block: "center" });
+ }
+ }
});
_this.$element.off()
_this.$element.on('click', '.btn-box', function() {
if ($(this).find('span').hasClass('icon-minus-sign')) {
$(this).find('span').removeClass('icon-minus-sign').addClass('icon-plus-sign');
_this.$element.find('ul').fadeOut();
- // $('#manualBody').removeClass('withNaviBar')
} else {
$(this).find('span').removeClass('icon-plus-sign').addClass('icon-minus-sign');
_this.$element.find('ul').fadeIn();
- // $('#manualBody').addClass('withNaviBar')
+ _this.$element.find('input').focus()
}
})
+ // 目录搜索
+ _this.$element.on('input', 'input', function () {
+ var keyword = $(this).prop('value')
+ _this.$element.find('li').each(function(){
+ if ($(this).find('a').text().toUpperCase().includes(keyword.toUpperCase())) {
+ $(this).show()
+ } else {
+ $(this).hide()
+ }
+ })
+ })
}
};
@@ -162,7 +181,7 @@
levelTwo: 'h2', //二级标题(暂不支持更多级)
levelThree: 'h3', //二级标题(暂不支持更多级)
width: 220, //容器宽度
- height: 480, //容器高度
+ height: 460, //容器高度
padding: 20, //内部间距
offTop: 100, //滚动切换导航时离顶部的距离
diff --git a/src/assets/styles/jquery.autoMenu.css b/src/assets/styles/jquery.autoMenu.css
index ccd1f0ea..3c02d360 100644
--- a/src/assets/styles/jquery.autoMenu.css
+++ b/src/assets/styles/jquery.autoMenu.css
@@ -48,7 +48,7 @@ a:focus {
/*-------main---------*/
-#manualNavi {
+#manual #manualNavi {
position: fixed;
bottom: 0;
right: 15px;
@@ -56,19 +56,39 @@ a:focus {
text-align: left;
}
-#manualNavi ul {
+#manual #manualNavi ul {
line-height: 2;
overflow-y: auto;
background: #ffffffe0;
-webkit-box-shadow: 0 0 10px #CCC;
-moz-box-shadow: 0 0 10px #CCC;
box-shadow: 0 0 10px #CCC;
+ margin: 0 0 5px 0;
}
-#manualNavi li {
+#manual #manualNavi input {
+ border-bottom: 1px solid #64c699;
+ outline: none;
+ border-top: none;
+ border-left: none;
+ border-right: none;
+ margin-bottom: 10px !important;
+ font-size: 16px;
+ min-width: unset;
+ box-shadow: none;
+}
+
+#manual #manualNavi li {
list-style: none;
}
+#manual #manualNavi a {
+ color: #42b983;
+ text-decoration: none;
+ font-weight: normal;
+ user-select: none
+}
+
#manualNavi ul>li.sub {
padding-left: 20px;
}
@@ -81,11 +101,11 @@ a:focus {
color: #399c9c;
} */
-#manualNavi ul>li.active>a {
+#manual #manualNavi ul>li.active>a {
color: #ff5370;
}
-.btn-box {
+#manual #manualNavi .btn-box {
display: inline-block;
width: 40px;
height: 40px;
@@ -94,7 +114,7 @@ a:focus {
position: relative;
}
-.icon-plus-sign {
+#manual #manualNavi .icon-plus-sign {
display: inline-block;
width: 26px;
height: 26px;
@@ -106,8 +126,8 @@ a:focus {
left: 235px;
}
-.icon-plus-sign:before,
-.icon-plus-sign:after {
+#manual #manualNavi .icon-plus-sign:before,
+#manual #manualNavi .icon-plus-sign:after {
content: '';
display: inline-block;
width: 4px;
@@ -119,11 +139,11 @@ a:focus {
left: 7px;
}
-.icon-plus-sign:after {
- -webkit-transform: rotate(90deg);
+#manual #manualNavi .icon-plus-sign:after {
+ transform: rotate(90deg);
}
-.icon-minus-sign {
+#manual #manualNavi .icon-minus-sign {
display: inline-block;
width: 26px;
height: 26px;
@@ -135,7 +155,7 @@ a:focus {
left: 235px;
}
-.icon-minus-sign:before {
+#manual #manualNavi .icon-minus-sign:before {
content: '';
display: inline-block;
width: 18px;