如何让展开的<li>列表在页面重载后保持展开状态？

我完全懂你遇到的这个麻烦——点击折叠菜单里的子项跳转到新页面后，原本展开的父菜单又缩回去了，体验很不友好。结合你用的Flask和Bootstrap 3，这里有两个实用的解决方案，你可以根据自己的需求选择：

方案一：后端（Flask）传递激活状态，前端渲染时展开 #

你之前尝试用Jinja绑定aria-expanded没生效，核心原因是Bootstrap 3的collapse组件需要同时满足两个条件才会展开：父触发元素的aria-expanded为true，且子折叠列表要加上in类（默认的collapse类是折叠状态，collapse in才是展开状态）。

步骤1：Flask视图中传递当前子项对应的父折叠ID #

假设用户访问子页面时，你能通过业务逻辑判断出它所属的父折叠菜单ID（比如访问/someLongText对应父菜单sometext），在渲染模板时把这个ID传给前端：

@app.route('/someLongText')
def some_category_page():
    # 根据当前页面逻辑，获取对应的父折叠菜单ID
    active_collapse_id = 'sometext'
    return render_template('your_template.html', active_collapse_id=active_collapse_id)

步骤2：修改模板中的折叠菜单代码 #

用Jinja模板语法动态设置aria-expanded属性和子列表的类：

<nav id="sidebar">
 <div class="sidebar-header">
 <div class="inside">
 <h3>{{yourBlogName}}</h3>
 </div>
 </div>
 <ul class="list-unstyled components">
 <li class="active">
 <a href="#sometext" data-toggle="collapse" aria-expanded="{{ 'true' if active_collapse_id == 'sometext' else 'false' }}">example list</a>
 <ul class="collapse list-unstyled {{ 'in' if active_collapse_id == 'sometext' else '' }}" id="sometext">
 <li><a class="innerCategoryList" href="/someLongText">example inner list</a></li>
 <li><a class="innerCategoryList" href="/someLongText">example inner list</a></li>
 <li><a class="innerCategoryList" href="/someLongText">example inner list</a></li>
 </ul>
 </li>
 <li class="active">
 <a href="#sometext2" data-toggle="collapse" aria-expanded="{{ 'true' if active_collapse_id == 'sometext2' else 'false' }}">example list2</a>
 <ul class="collapse list-unstyled {{ 'in' if active_collapse_id == 'sometext2' else '' }}" id="sometext2">
 <li><a class="innerCategoryList" href="/someLongText">example inner list</a></li>
 <li><a class="innerCategoryList" href="/someLongText">example inner list</a></li>
 <li><a class="innerCategoryList" href="/someLongText">example inner list</a></li>
 </ul>
 </li>
 <li class="active">
 <a href="#sometext3" data-toggle="collapse" aria-expanded="{{ 'true' if active_collapse_id == 'sometext3' else 'false' }}">example list3</a>
 <ul class="collapse list-unstyled {{ 'in' if active_collapse_id == 'sometext3' else '' }}" id="sometext3">
 <li><a class="innerCategoryList" href="/someLongText">example inner list</a></li>
 <li><a class="innerCategoryList" href="/someLongText">example inner list</a></li>
 <li><a class="innerCategoryList" href="/someLongText">example inner list</a></li>
 </ul>
 </li>
 </ul>
</nav>

这样页面加载时，对应的父折叠菜单会自动展开，完全符合Bootstrap组件的状态要求。

方案二：纯前端通过URL参数记录状态 #

如果不想依赖后端传递数据，可以用URL参数来记录激活的父折叠ID，页面加载时通过JS自动读取并展开菜单。

步骤1：修改子项链接，添加父折叠ID参数 #

给每个子列表的链接加上?collapse_id=xxx参数，比如：

<li><a class="innerCategoryList" href="/someLongText?collapse_id=sometext">example inner list</a></li>

步骤2：添加JS代码处理展开逻辑 #

在你现有的JS代码后面添加这段逻辑：

$(document).ready(function () {
 $('#sidebarCollapse').on('click', function () {
 $('#sidebar').toggleClass('active');
 });

 // 自动展开对应父折叠菜单
 const urlParams = new URLSearchParams(window.location.search);
 const collapseId = urlParams.get('collapse_id');
 if (collapseId) {
   // 更新父触发元素的aria-expanded属性
   $(`a[href="#${collapseId}"]`).attr('aria-expanded', 'true');
   // 给子列表添加in类，实现展开
   $(`#${collapseId}`).addClass('in');
 }
});

当用户点击带参数的子链接跳转到新页面后，JS会读取URL里的参数，自动展开对应的父折叠菜单。

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