diff options
author | jeffreytse <jeffreytse.mail@gmail.com> | 2019-12-05 19:07:34 +0800 |
---|---|---|
committer | jeffreytse <jeffreytse.mail@gmail.com> | 2019-12-05 19:07:34 +0800 |
commit | 8c1cde8fc921b8b061a3a01a8abad67dad2a2feb (patch) | |
tree | 43615f296365a041c478fc02bc6ab7d98a6a1617 /_includes | |
parent | aea2f30ffe7ca5b1aaa621a578433c3db7673385 (diff) |
feat: auto hide empty article menu
Diffstat (limited to '_includes')
-rw-r--r-- | _includes/sidebar/article-menu.html | 14 |
1 files changed, 10 insertions, 4 deletions
diff --git a/_includes/sidebar/article-menu.html b/_includes/sidebar/article-menu.html index c4286b1..ff984b6 100644 --- a/_includes/sidebar/article-menu.html +++ b/_includes/sidebar/article-menu.html @@ -13,9 +13,15 @@ <script> function generateContent() { - var menu = document.querySelector(".post-menu .post-menu-content"); + var menu = document.querySelector(".post-menu"); + var menuContent = menu.querySelector(".post-menu-content"); var headings = document.querySelector(".post-content").querySelectorAll("h2, h3, h4, h5, h6"); + // Hide menu when no headings + if (headings.length === 0) { + return menu.style.display = "none"; + } + // Generate post menu var menuHTML = ''; for (var i = 0; i < headings.length; i++) { @@ -25,14 +31,14 @@ + '<a href="#h-' + h.getAttribute('id') + '">' + h.textContent + '</a></li>'); } - menu.innerHTML = '<ul>' + menuHTML + '</ul>'; + menuContent.innerHTML = '<ul>' + menuHTML + '</ul>'; // The header element var header = document.querySelector('header.site-header'); // Active the menu item window.addEventListener('scroll', function (event) { - var lastActive = menu.querySelector('.active'); + var lastActive = menuContent.querySelector('.active'); var changed = true; for (var i = headings.length - 1; i >= 0; i--) { var h = headings[i]; @@ -43,7 +49,7 @@ var headerHeight = headerTop + headerHeight + 20; if (headingRect.top <= headerHeight) { var id = 'h-' + h.getAttribute('id'); - var curActive = menu.querySelector('a[href="#' + id + '"]'); + var curActive = menuContent.querySelector('a[href="#' + id + '"]'); if (curActive) { curActive.classList.add('active'); } |