Javascript 此折叠/展开状态的最终切换是什么？

我发布了一个代码相同的问题，但这是一个不同的问题。这是最大的和更大的

所以这个

#li.active

内部的

#侧边栏

是可折叠的。当通过单击将列表切换为展开时，我们可以看到内部列表显示为平滑动画

<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="false">example list</a>
            <ul class="collapse list-unstyled" 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>
    </ul>
</nav>

实际上，在这些引用旁边有一个JQuery代码，看起来像是它导致了折叠函数，但结果是它可以被完全删除，列表仍然可以折叠

<script type="text/javascript">
    $(document).ready(function () {
        $('#sidebarCollapse').on('click', function () {
            $('#sidebar').toggleClass('active');
        });
    });
</script>

$（文档）.ready（函数（）{
$（'sidebarCollapse'）。在（'click'，函数（）{
$（“#边栏”）.toggleClass（'active'）；
});
});

所以我想知道的是，我应该改变什么，手动折叠/展开一个特定的列表。通常，当我们在inspect中编辑dom或css时，可以立即看到视图的变化。有了这个，我还没有找到一种方法来切换折叠/展开与我的检查。我可以预料，现在很可能是jQuery和引导程序触发了这个动作。这是否意味着我需要编辑引用的长代码来手动更改列表的折叠状态

---

我问这个问题的原因是不便。就像我单击了一个可折叠列表

水果

，显示了内部列表

香蕉、苹果、猕猴桃

，然后我单击了

香蕉

，当新加载下一页时，

水果

将关闭。描述问题，以防有机会解决此问题

链接和可折叠内容通过

data toggle=“collapse”

属性连接

可以使用以下代码以编程方式显示/隐藏/切换可折叠元素：

$（'sometext'）。折叠（'hide'）

下面是引导文档中的一个示例

---

但是，如果你想在页面重新加载时保持列表的状态，那么这是一个完全不同的主题。在你试图完成的事情中有很多事情是不清楚的，所以如果你能把你的问题分解成更小的问题，并一个接一个地解决它们，那么效率会更高。您可能会问自己的一个问题是“我如何知道在各种情况下应该扩展哪些菜单？”。我可以从URL获取此信息吗？如何将URL映射到特定状态等？

问题解决后，只需添加此答案。正如@soeik提到的，这是我需要编辑的引导。我将上次打开的可折叠列表存储到url

<a class="innerCategoryList" 
   href="/useful_function?isInCategory=true&
                         category=python&
                         lastOpenedCategory=python">useful function</a>

jQuery调用了show操作。（{{}}是jinja模板语法）

---

查看您正在使用的引导的文档

<a class="innerCategoryList" 
   href="/useful_function?isInCategory=true&
                         category=python&
                         lastOpenedCategory=python">useful function</a>

return render_template(
    "index.html",
    lastOpenedCategory=request.args.get("lastOpenedCategory"),
    ...)

document.addEventListener('DOMContentLoaded', function () {
    if ({{lastOpenedCategory}}!=null){
        var lastOpenedCategory = '#'+{{lastOpenedCategory}}.id
        $(lastOpenedCategory).collapse('show');
    };
});