如何使用SIDR实施子导航菜单？

Question

我正在尝试使用SIDR库（https://www.berriart.com/sidr/）实现第二个导航栏。我还在HTML页面中使用mustache.js进行模板制作。我不确定在特定页面上如何显示第二个导航层。例如，假设我的导航栏具有链接： 1 2 3 4 5.如果用户在页面'5'上，我希望在主导航栏正下方的另一个导航栏显示更多链接。这是我到目前为止的代码。如何打开第二个导航栏并保持打开状态？

HTML：

<script src="//cdn.jsdelivr.net/jquery/2.2.0/jquery.min.js"></script>
<!-- Include the Sidr JS -->
<script src="//cdn.jsdelivr.net/jquery.sidr/2.2.1/jquery.sidr.min.js"></script>

<div class="sm-sidr-background" id="sidr_background"></div>

<div class ="sm-header small" style="text-align: center">
    <div class="row col-sm-12">
        <div>
            <i class = "fa fa-bars fa-2x" id="simple-menu" href="#sidr"></i>
        </div>
       <div style="display: inline-block" class="mobile-menu-text"> {{{title}}} </div>
    </div>
</div>

<div class="big container">
            <ul  class="nav nav-pills">
                {{#navigation_default}}
                <li class="nav-item">
                    <a class="nav-link {{#active}}active{{/active}} {{extra_classes}}" href="{{href}}" {{#new_window}}target="_blank"{{/new_window}} {{#attachment}}download{{/attachment}}>{{label}}</a>
                </li>
                {{/navigation_default}}
            </ul>
            {{#has_subnav_big}}
            <ul class=”nav nav-pills subnav i-don’t-know-what-class-to-use-here”>
                {{#subnav_big}}
                <li class=”nav-item”>
                    <a class="nav-link {{#active}}active{{/active}} {{extra_classes}}" href="{{href}}" {{#new_window}}target="_blank"{{/new_window}} {{#attachment}}download{{/attachment}}>{{label}}</a>
                </li>
                {{/subnav_big }}
            </ul>
            {{/has_subnav_big }}
        </div>

        <div id="sidr">
            <!-- Your content -->
            <ul class="nav nav-pills">
                {{#navigation_default}}
                <li class="nav-item">
                    <a id="responsive-menu-button" class="nav-link {{#active}}active{{/active}} {{extra_classes}}" href="{{href}}" {{#new_window}}target="_blank"{{/new_window}} {{#attachment}}download{{/attachment}}>{{label}}</a>
                    <div id="subnavigation">
                        {{#has_subnav}}
                        <ul class=”nav nav-pills subnav i-don’t-know-what-class-to-use-here” id="navigation">
                            {{#subnav}}
                            <li class=”nav-item”>
                                <a class="nav-link {{#active}}active{{/active}} {{extra_classes}}" href="{{href}}" {{#new_window}}target="_blank"{{/new_window}} {{#attachment}}download{{/attachment}}>{{label}}</a>
                            </li>
                            {{/subnav}}
                        </ul>
                        {{/has_subnav}}
                    </div>
                </li>
                {{/navigation_default}}
            </ul>
        </div>

JavaScript：

<script>
        $(document).ready(function() {
            $('#sidr_background').hide();

            $('#simple-menu').sidr();

            $('#simple-menu').on("click touchstart", function(){
                $('#sidr_background').show();
            });

            $('#sidr_background').on("click touchstart", function(){
                $.sidr('close', 'sidr');
               $('#sidr_background').hide();
            });

            $("img").addClass("img-fluid");
            $("img.no-fluid").removeClass("img-fluid");
            $("img.img-fluid").css("height", "auto");
        });

        $('#responsive-menu-button').sidr({
            name: '{{href}}',
            source: '#subnavigation'
        });
    </script>