添加这个功能，使得笔记主内容能够更好的展示
1.添加js
document.addEventListener('DOMContentLoaded', function () {
// 获取可折叠面板的标题元素
const collapsibleHeader = document.querySelector('.collapsible-header');
const collapseElement = document.getElementById('relatedNotesCollapse');
const toggleIcon = document.querySelector('.toggle-icon');
const mainContent = document.querySelector('.col-md-8');
const sidePanel = document.querySelector('.col-md-4');
const noteContent = document.querySelector('.note-content-detail');
if (!collapsibleHeader || !collapseElement || !toggleIcon || !mainContent || !sidePanel) {
// 如果找不到必要的元素，就退出
return;
}
// 从本地存储中获取面板状态（如果有）
const isCollapsed = localStorage.getItem('relatedNotesCollapsed') === 'true';
// 初始化面板状态
if (isCollapsed && window.innerWidth >= 768) {
// 只在非移动设备上应用收缩状态
// 收缩
sidePanel.classList.add('collapsed');
mainContent.classList.add('expanded');
// 隐藏内容区域
collapseElement.classList.remove('show');
// 显示悬浮按钮
if (document.querySelector('.float-toggle-btn')) {
document.querySelector('.float-toggle-btn').classList.add('visible');
}
}
// 添加点击事件监听器，仅在非移动设备下启用
collapsibleHeader.addEventListener('click', function (e) {
// 在移动设备下阻止叉号图标的点击事件
if (window.innerWidth < 768 && e.target.classList.contains('toggle-icon')) {
e.stopPropagation(); // 阻止事件传播
return; // 在移动设备上不处理叉号图标点击
}
// 非移动设备下正常切换面板
if (window.innerWidth >= 768) {
togglePanel();
}
});
// 特别为移动设备处理叉号图标
if (toggleIcon) {
toggleIcon.addEventListener('click', function (e) {
// 在移动设备下阻止点击事件
if (window.innerWidth < 768) {
e.stopPropagation();
e.preventDefault();
}
});
}
// 如果存在悬浮按钮，添加点击事件
const floatBtn = document.querySelector('.float-toggle-btn');
if (floatBtn) {
floatBtn.addEventListener('click', function () {
togglePanel();
});
}
// 切换面板状态的函数
function togglePanel() {
const isExpanded = !sidePanel.classList.contains('collapsed');
// 只在非移动设备上更新状态
if (window.innerWidth >= 768) {
// 更新本地存储中的状态
localStorage.setItem('relatedNotesCollapsed', isExpanded);
if (isExpanded) {
// 收缩
sidePanel.classList.add('collapsed');
mainContent.classList.add('expanded');
// 隐藏内容区域
collapseElement.classList.remove('show');
// 显示悬浮按钮
if (floatBtn) {
floatBtn.classList.add('visible');
}
} else {
// 展开
sidePanel.classList.remove('collapsed');
mainContent.classList.remove('expanded');
// 显示内容区域
collapseElement.classList.add('show');
// 隐藏悬浮按钮
if (floatBtn) {
floatBtn.classList.remove('visible');
}
}
}
}
// 窗口大小改变时的处理
window.addEventListener('resize', function () {
if (window.innerWidth < 768) {
// 在移动设备视图下恢复正常布局
sidePanel.classList.remove('collapsed');
mainContent.classList.remove('expanded');
// 显示相关笔记内容
collapseElement.classList.add('show');
// 隐藏悬浮按钮
if (floatBtn) {
floatBtn.classList.remove('visible');
}
// 确保叉号图标在移动设备上不执行收缩功能
if (toggleIcon) {
toggleIcon.style.pointerEvents = 'none';
toggleIcon.style.display = 'none';
}
} else {
// 恢复图标功能
if (toggleIcon) {
toggleIcon.style.pointerEvents = 'auto';
toggleIcon.style.display = '';
}
// 在桌面视图下，如果状态是收缩的，保持收缩
if (localStorage.getItem('relatedNotesCollapsed') === 'true') {
sidePanel.classList.add('collapsed');
mainContent.classList.add('expanded');
collapseElement.classList.remove('show');
if (floatBtn) {
floatBtn.classList.add('visible');
}
}
}
});
// 初始检查是否为移动设备，禁用叉号图标功能
if (window.innerWidth < 768 && toggleIcon) {
toggleIcon.style.pointerEvents = 'none';
toggleIcon.style.display = 'none';
}
});
2.添加 css
/* 收缩时的侧边栏样式 */
.col-md-4.collapsed {
width: 0 !important;
min-width: 0;
padding: 0;
margin: 0;
overflow: hidden;
transition: all 0.3s ease;
}
/* 收缩时的主内容区域样式 */
.col-md-8.expanded {
width: 100% !important;
transition: width 0.3s ease;
padding-right: 15px; /* 确保有正确的内边距 */
}
/* 悬浮按钮样式 */
.float-toggle-btn {
position: fixed;
top: 80px;
right: 20px;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
z-index: 1030;
opacity: 0;
visibility: hidden;
transform: scale(0.8);
transition: all 0.3s ease;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.float-toggle-btn.visible {
opacity: 1;
visibility: visible;
transform: scale(1);
}
.float-toggle-btn i {
font-size: 1.2rem;
}
/* 改善卡片样式 */
.side-panel-container {
transition: all 0.3s ease;
overflow: hidden;
}
/* 响应式布局调整 */
@media (max-width: 767.98px) {
.col-md-4, .col-md-4.collapsed,
.col-md-8, .col-md-8.expanded {
width: 100% !important;
}
.float-toggle-btn {
display: none !important;
}
}
/* 确保收缩时侧边栏内容不显示 */
.col-md-4.collapsed .card {
display: none;
}
/* 确保主内容区域在收缩时填满 */
.row {
--bs-gutter-x: 1.5rem;
}
3.页面
@model IEnumerable<WebNote.Models.Note>
<div class="card shadow-sm sticky-top side-panel-container" style="top: 1rem;">
<div class="card-header d-flex justify-content-between align-items-center cursor-pointer collapsible-header">
<span>相关笔记</span>
<i class="bi bi-x-lg toggle-icon"></i>
</div>
<div class="show" id="relatedNotesCollapse">
<div class="card-body">
@if (Model.Any())
{
<ul class="list-group list-group-flush">
@foreach (var relatedNote in Model)
{
<li class="list-group-item px-0">
<a asp-page="./Detail" asp-route-id="@relatedNote.Id" class="text-decoration-none">
@relatedNote.Title
</a>
<div class="small text-muted">
@relatedNote.CreatedAt.ToString("yyyy-MM-dd")
</div>
</li>
}
</ul>
}
else
{
<p class="text-muted mb-0">没有找到相关笔记</p>
}
</div>
</div>
</div>
<!-- 悬浮按钮，当面板收起时显示 -->
<button class="btn btn-primary btn-sm rounded-circle shadow float-toggle-btn">
<i class="bi bi-list"></i>
</button>
<script src="~/js/collapsible-panel.js"></script>
遇到了几个坑
- AI的提示，页面 id为relatedNotesCollapse 添加了collapse 类，这使得隐藏时会有点击事件
- AI的提示，js里隐藏时没有隐藏关闭的i字体
- 样式不正确，最后改为button
- 总结，AI不靠谱
