这种折叠/展开状态的最终转换是什么? [英] What is the ultimate toggle of this fold/unfold state?

问题描述

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

I've posted a question with the same code but this is a different question. Here is the jsfiddle and bigger preview.

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

So this #li.active inside #sidebar is foldable. When the list is toggled to be unfolded by click, we can see the inner lists show up with smooth animation.

<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这样的属性才启用了此折叠功能，但后来变得很清楚，只要我包含这些引用，就可以启用该折叠功能.

I originally thought it was an attribute like aria-expanded that enabled this folding but it became clear later on that the folding will be enabled as long as I include these references.

<!-- 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代码，看起来像是在引起折叠功能，但事实证明它可以完全删除，并且列表仍然保持可折叠状态.

There was actually a JQuery code right next to these references that looked like it was causing the the folding function, but turned out it can be completely removed and still the list will stay foldable.

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

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

So what I'm trying to know is, what should I change, to have a specific list folded/unfolded manually. Usually we can see the change of view immediately when we edit our dom or css in the inspect. With this, I have not found a way to toggle fold/unfold with my inspect. And I can expect now it is likely to be the jQuery and Bootstrap that are triggering the action. Does this mean that I need to edit the long code of the references to change the folding status of a list manually?

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

The reason I'm asking this is the inconvenience. Like if I clicked a foldable list fruit and inner lists banana, apple, kiwi were shown and I clicked banana, the fruit is shut when the next page was newly loaded. Describing the issue in case there is a get-around to this.

推荐答案

链接和可折叠内容与data-toggle="collapse"属性连接.

Link and collapsible content are connected with the data-toggle="collapse" attribute.

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

You can show/hide/toggle collapsible elements programmatically using the following code: $('#sometext').collapse('hide')

这是引导程序文档中的页面.

Here is a page in the bootstrap documentation.

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

But if you want to keep the state of your list when the page is reloaded it's a completely different topic. There are a lot of things unclear in what are you trying to accomplish, so it would be much more efficient if you could breakdown your problem into smaller ones and solve them one after another. One of the questions you might ask yourself is "How do I know which menu should be expanded in every situation". Can I get this information from the URL? How do I map my URL to a specific state, etc?

这篇关于这种折叠/展开状态的最终转换是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！