如何在Django UI中实现点击侧边栏模型跳转并收起侧边栏

原生JavaScript实现 #

假设你的侧边栏HTML结构如下：

<!-- 侧边栏容器 -->
<div id="sidebar" class="sidebar">
  <!-- 模型列表 -->
  <ul class="model-list">
    <li><a href="/model/model-a" class="model-item">模型A</a></li>
    <li><a href="/model/model-b" class="model-item">模型B</a></li>
  </ul>
</div>

实现逻辑 #

1. 给所有模型列表项绑定点击事件
2. 点击时先切换侧边栏的折叠状态（通过添加/移除CSS类）
3. 执行页面跳转（可选择加小延迟让折叠动画完成）

// 获取所有模型项和侧边栏元素
const modelItems = document.querySelectorAll('.model-item');
const sidebar = document.getElementById('sidebar');

modelItems.forEach(item => {
  item.addEventListener('click', function(e) {
    // 触发侧边栏折叠
    sidebar.classList.toggle('collapse');
    // 可选：添加延迟跳转，让折叠动画完整展示
    // e.preventDefault();
    // setTimeout(() => {
    //   window.location.href = this.href;
    // }, 200);
  });
});

对应的折叠样式示例：

.sidebar {
  width: 250px;
  transition: width 0.3s ease;
}
.sidebar.collapse {
  width: 0;
  overflow: hidden;
}

Vue 3实现（结合Vue Router） #

通过响应式变量控制侧边栏折叠状态，点击时更新状态并跳转：

<template>
  <div :class="['sidebar', { collapse: isCollapse }]">
    <ul class="model-list">
      <li v-for="model in models" :key="model.id">
        <router-link 
          :to="model.path" 
          @click="isCollapse = true"
        >
          {{ model.name }}
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const isCollapse = ref(false);
// 模型列表数据
const models = [
  { id: 1, name: '模型A', path: '/model/a' },
  { id: 2, name: '模型B', path: '/model/b' }
];
</script>

<style scoped>
.sidebar {
  width: 250px;
  transition: width 0.3s ease;
}
.sidebar.collapse {
  width: 0;
  overflow: hidden;
}
</style>

React实现（结合React Router） #

用状态管理折叠状态，点击时更新状态并执行路由跳转：

import { useState } from 'react';
import { Link } from 'react-router-dom';

const Sidebar = () => {
  const [isCollapse, setIsCollapse] = useState(false);
  const models = [
    { id: 1, name: '模型A', path: '/model/a' },
    { id: 2, name: '模型B', path: '/model/b' }
  ];

  return (
    <div className={`sidebar ${isCollapse ? 'collapse' : ''}`}>
      <ul className="model-list">
        {models.map(model => (
          <li key={model.id}>
            <Link 
              to={model.path} 
              onClick={() => setIsCollapse(true)}
            >
              {model.name}
            </Link>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default Sidebar;

关键注意点 #

• 如果侧边栏有过渡动画，建议添加200-300ms的延迟跳转，提升视觉体验
• 框架项目优先使用自带路由跳转方法，避免原生window.location导致的页面刷新
• 若需要刷新页面后保持折叠状态，可将isCollapse状态存入localStorage，初始化时读取

内容的提问来源于stack exchange，提问作者randomDev