我用相同的代码发布了一个问题,但这是一个不同的问题。这是jsfiddle和更大的preview

因此,#li.active中的此#sidebar是可折叠的。通过单击切换列表展开时,我们可以看到内部列表以流畅的动画显示。

<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>


我最初以为是这样的属性,例如aria-expanded启用了此折叠,但后来变得很清楚,只要我包含这些引用,就可以启用折叠。

<!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<!-- Bootstrap Js CDN -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


实际上,在这些引用旁边有一个JQuery代码,看起来像是在引起折叠功能,但事实证明,它可以完全删除,并且列表仍可折叠。

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


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

我要问的原因是不便。就像我单击可折叠列表fruit并显示内部列表banana, apple, kiwi并单击banana一样,当新装入下一页时,fruit也将关闭。如果有解决方法,请描述问题。

最佳答案

链接和可折叠内容与data-toggle="collapse"属性关联。

您可以使用以下代码以编程方式显示/隐藏/切换可折叠元素:
$('#sometext').collapse('hide')

这是引导程序文档中的page

但是,如果您想在重新加载页面时保持列表状态,则是完全不同的主题。您要完成什么工作尚有很多不清楚的地方,因此,如果您可以将问题分解成更小的问题并一个接一个地解决,那么效率会更高。您可能会问自己一个问题:“我怎么知道在每种情况下都应该扩展哪个菜单”。我可以从URL获得此信息吗?如何将URL映射到特定状态等?

关于javascript - 折叠/展开状态的最终切换是什么?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/58936017/

10-12 13:03
查看更多