通过 jquery 切换引导侧边栏答案

【问题标题】：Toggle boostrap side bar by jquery通过 jquery 切换引导侧边栏
【发布时间】：2015-08-29 09:44:10
【问题描述】：

我已经完成了如何使用基于boostrap css 顶部的startbootstrap-simple-sidebar css 切换boostrap 侧导航栏

这是正在运行的示例代码

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <script src="https://code.jquery.com/jquery.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"
        rel="stylesheet" type="text/css" />
    <%--Add the css reference here--%>
    <link href="../css/simple-sidebar.css" rel="stylesheet" type="text/css" />
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script>
        $(document).ready(function () {
            $("#ToggleSideMenu").click(function (e) {
                e.preventDefault();
                $("#wrapper").toggleClass("toggled");
            });
        });
    </script>
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar">
                    </span>
                </button>
                <a class="navbar-brand" href="/">Application name</a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li><a href="/">Home</a></li>
                    <li><a href="/Home/About">About</a></li>
                    <li><a href="/Home/Contact">Contact</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="container body-content">
    </div>
    <div id="wrapper">
        <!-- Sidebar -->
        <div id="sidebar-wrapper">
            <ul class="sidebar-nav">
                <li class="sidebar-brand"><a href="#">Start Bootstrap </a></li>
                <li><a href="#">Home</a> </li>
                <li><a href="#">About</a> </li>
                <li><a href="#">Contact</a> </li>
            </ul>
        </div>
        <!-- /#sidebar-wrapper -->
        <!-- Page Content -->
        <div id="page-content-wrapper">
            <br />
            <br />
            <a href="#ToggleSideMenu" class="btn btn-default" id="ToggleSideMenu">Toggle Menu</a>
            <hr />
            <footer>
            <p>&copy; 2015 - My ASP.NET Application</p>
        </footer>
        </div>
        <!-- /#page-content-wrapper -->
    </div>
</body>
</html>

带图演示

我有一点不同的要求。

1) 所以告诉我要更改代码以使其成为右侧栏。如果可能，请提供更改代码以使其成为右侧栏。

2) 还告诉我如何才能有一个小 div 将附加或粘在左侧栏上，当单击该 div 时，左侧导航栏将折叠和展开，而不是切换菜单的大按钮。这是发布的两个屏幕截图 url，因为我想显示小 div 应该是什么样子来切换左 div。

请指导我回答我的 2 个问题。谢谢

【问题讨论】：

有一个名为 jasny bootstrap 的 bootstrap 扩展，它有一个内置的侧导航，您可能需要查看

标签： jquery html css twitter-bootstrap

【解决方案1】：

在菜单的 CSS 中查找 ID

#sidebar-wrapper {}

然后删除

left: ..px;

替换成

right: 1px

希望这会有所帮助:)

【讨论】：

如果你发布完整的工作代码会更好。还告诉我如何根据我发布的最后两张图片在左侧导航栏上附加小的粘性 div。
查看此页面的侧边开关。jasny.net/bootstrap/examples/navmenu-reveal