我用相同的代码发布了一个问题,但这是一个不同的问题。这是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/