feat: click sidebar menu add collapse and expand, close #294

This commit is contained in:
qingwei.li 2018-01-21 15:58:21 +08:00 • committed by cinwell.li
commit 5e161a1420
3 changed files with 21 additions and 5 deletions

View file

@ -13,6 +13,7 @@ export function eventMixin (proto) {
export function initEvent (vm) { export function initEvent (vm) {
// Bind toggle button // Bind toggle button
sidebar.btn('button.sidebar-toggle', vm.router) sidebar.btn('button.sidebar-toggle', vm.router)
sidebar.collapse('.sidebar', vm.router)
// Bind sticky effect // Bind sticky effect
if (vm.config.coverpage) { if (vm.config.coverpage) {
!isMobile && on('scroll', sidebar.sticky) !isMobile && on('scroll', sidebar.sticky)

View file

@ -14,17 +14,26 @@ export function btn (el, router) {
toggle() toggle()
}) })
const sidebar = dom.getNode('.sidebar')
isMobile && isMobile &&
dom.on( dom.on(
dom.body, dom.body,
'click', 'click',
_ => dom.body.classList.contains('close') && toggle() _ => dom.body.classList.contains('close') && toggle()
) )
dom.on(sidebar, 'click', _ => }
setTimeout((_ => getAndActive(router, sidebar, true, true), 0))
) export function collapse (el, router) {
el = dom.getNode(el)
dom.on(el, 'click', ({ target }) => {
if (
target.nodeName === 'A' &&
target.nextSibling &&
target.nextSibling.classList.contains('app-sub-sidebar')
) {
dom.toggleClass(target.parentNode, 'collapse')
}
})
} }
export function sticky () { export function sticky () {

View file

@ -270,6 +270,12 @@ main {
padding-bottom: 40px; padding-bottom: 40px;
} }
li.collapse {
.app-sub-sidebar {
display: none;
}
}
ul { ul {
margin: 0; margin: 0;
padding: 0; padding: 0;