通过添加toggleclass（）将Dropdown Accordion转换为Slide Out菜单

Question

我有一个使用Bootstrap 3.0构建的菜单。它浮动到左侧，可以通过使用jQuery的toggle_class（）向其添加css类来重新调整大小以适合图标。我想要实现的是，一旦将此菜单切换为较小的版本，我希望下拉菜单成为垂直滑出菜单。 以下是我要完成的示例http://wrapbootstrap.com/preview/WB0B30DGR如果有插件可以请指出我。

这是我的HTML代码：

    <div id="wrap">
    <div id="content">      
        <div id="navigation" class="" role="navigation">

            <!-- Sidebar -->
            <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="fa fa-bar"></span>
                    <span class="fa fa-bar"></span>
                    <span class="fa fa-bar"></span>
                  </button>
                  <a class="navbar-brand" href="./">CIMP Admin</a>
                </div>

                <!--SIDENAV
                ============================================= -->
                <div class="collapse navbar-collapse navbar-ex1-collapse">
                    <ul class="nav navbar-nav side-nav">
                        <li class="active" ><a href="#"><i class="fa fa-dashboard"></i> Dashboard</a></li>
                        <li class="dropdown ">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-camera"></i> Media <b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="#"><i class="fa fa-picture-o"></i> Library</a></li>
                                <li><a href="#"><i class="fa fa-picture-o"></i> Albums</a></li>
                                <li><a href="#"><i class="fa fa-picture-o"></i> Slideshows</a></li>
                            </ul>
                        </li>
                        <!-- Modules -->
                        <li class="dropdown ">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-puzzle-piece"></i> Modules <b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="#"><i class="fa fa-thumb-tack"></i> Posts</a></li>
                                <li><a href="#"><i class="fa fa-cloud"></i> Uploads</a></li>
                                <li><a href="#"><i class="fa fa-desktop"></i> Testimonials</a></li>
                            </ul>
                        </li>           
                        <li><a href="#"><i class="fa fa-users"></i> Users</a></li>
                        <li calss="active"><a id="toggle-pane" href="#"><i class="fa fa-caret-square-o-left"></i> Hide Menu Bar</a></li>
                    </ul>
                </div>
            </nav><!--/ nav -->

        </div><!--/ navigation -->
    </div><!--/ content -->
</div><!-- wrap -->

<script type="text/javascript">
    $("#toggle-pane").click(function () {
        $('#wrap').toggleClass("folded");
    });
</script>