Question

我正在尝试使用Bootstrap在Symfony2中实现导航栏，但到目前为止我还没有设法找到任何有用的资源。我想要做的是拥有一些类别和子类别，当用户点击一个类别时，弹出可用的子类别。

初始状态示例：

+Category 1
+Category 2
+Category 3
+Category 4

点击第1类链接示例后：

+Category 1
 -SubCategory 1
 -SubCategory 2
 -SubCategory 3
+Category 2
+Category 3
+Category 4

到目前为止我所拥有的是：

<div role="tabpanel" class="tab-pane" id="profile">
            <div id="affix-nav" class="affix sidebar col-sm-3">
                <ul class="nav sidenav" data-spy="affix">
                    {% for cat in categories %}
                        {% include 'ToolBundle:Default:sidebar_bit.html.twig' %}
                    {% endfor %}
                </ul>
            </div>
        </div>

...那就是 sidebar_bit.html.twig

<li>
    <a href="#cat_{{ cat.getId }}">{{ cat.getDefaultName }}</a>
    {% if no_subs is not defined %}
        <ul class="nav">
            {% for cat in cat.getChildren %}
                {% include 'ToolBundle:Default:sidebar_bit.html.twig' with {'no_subs': true} %}
            {% endfor %}
        </ul>
    {% endif %}
</li>

非常感谢，如果需要，请不要犹豫。

更新

这是jsfiddle：https://jsfiddle.net/0uwegh6k/2/

Answer 1

小提琴示例搞砸了，但看起来你必须添加一些js才能使它工作，或者你可以使用boostrap 3切换链接是here

工作原理与触发器上的data-toggle="collapse"类似，并使用href="collapseExample"或data-target="#collapseExample"定位，如上面的链接所示

 <ul>
        <li>
            <a href="collapseExample" data-toggle="collapse" >Europe</a>
            <ul class="nav" id="collapseExample">
                <li>
                    <a href="#cat_13">England</a>
                </li>
                <li>
                    <a href="#cat_14">Spain</a>
                </li>
            </ul>
        </li>

  <ul>

（子） - 类别在Bootstrap中粘贴侧边栏

1 个答案: