说明

1. 侧边栏导航中的文章链接使用相对链接
   
   RelPermalink
   

   完整链接: Permalink
   

2. 获取页面链接, 找到导航中对应项, 为之添加高亮类
   

3. 获取与上级div同级的button元素, 为之添加高亮类, 设置展开, 设置图标旋转
   

JavaScript代码

Copy 1const url = window.location.pathname;
 2// console.log(url);
 3
 4const active_article = document.querySelector(`.offcanvas-custom a[href="${url}"]`);
 5
 6active_article.classList.add('active');
 7// console.log(active_article);
 8
 9var child = active_article;
10while (child.tagName !== "BODY")
11{
12    let parent = child.parentNode; // 获取父节点
13
14    if (!parent) break;
15
16    if (parent.tagName == "DIV" && parent.hasAttributes())
17    {
18        const id = parent.getAttribute("id");
19        if (id && id.startsWith("section"))
20        {
21            parent.classList.add("show");
22            parent.classList.add("active");
23
24            let up = parent.parentNode;
25            if (up)
26            {
27                // console.log("parent", up);
28                for (i = 0; i < up.children.length; ++i)
29                {
30                    let brother = up.children[i];
31                    if (brother.tagName == "BUTTON")
32                    {
33                        // console.log("button", brother);
34
35                        brother.setAttribute("aria-expanded", "true");
36                        brother.classList.add("active");
37                        // console.log("button", brother);
38
39                        break;
40                    }
41                }
42            }
43
44            // console.log(parent);
45        }
46    }
47    child = parent;
48}

CSS样式

Copy1.offcanvas-custom {
2    background-color: transparent;
3
4    button.active, a.active {
5      color: brown;
6    }
7}

侧边栏导航高度依据显示器

侧边栏高度

Copy1height: 100vh;

侧边栏样式修改说明

1. 移除ul中的small类, 子标题不会逐渐变小
   
2. 移除button中的btn类, 可折叠项不会有框
   

手风琴效果

Bootstrap 5 - 折叠

1. 同一级的可折叠项只展开一个, 它们具有相同的上级
   

   Copy1data-bs-parent="#offcanvas-custom-drop"

2. 为上级设置id
   

   Copy1id="offcanvas-custom-drop"

3. 只设置了第一级
   

便签