如何使用 jQuery 和 bootstrap css 实现带有图标的展开折叠侧导航答案

【问题标题】：How to achieve Expand collapse Side Nav with icon using jQuery and bootstrap css如何使用 jQuery 和 bootstrap css 实现带有图标的展开折叠侧导航
【发布时间】：2015-08-29 18:04:44
【问题描述】：

我几乎已经完成了使用 jQuery 和 Bootstrap 展开折叠侧导航的工作。这是我的 html 和屏幕截图。

<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>

屏幕截图

在我的情况下，导航正在通过按钮展开和折叠，我想使用将与导航栏粘在一起的图标。在这里，我给出了一个看起来与我的要求相同的 url。

http://www.keenthemes.com/preview/index.php?theme=conquer

只要告诉我要在我的 html 和 css 中进行哪些更改，以便在我的左侧导航中获得一个小图标棒。如果可能，请帮助我提供代码示例。谢谢

【问题讨论】：

您可以将按钮定位在 html 的导航栏中，并将其绝对定位在 CSS 的右上角。如果您打算在单击按钮时完全隐藏侧边栏，请不要忘记在 css 中为 right 属性设置负值，以使按钮留在屏幕上。这将要求您保持侧边栏中的溢出可见。
能否请您发布一些相关代码，因为我迷失在 html 和 css 中。

标签： jquery html css twitter-bootstrap

【解决方案1】：

这是一个简单的侧边栏，里面有一个切换按钮。当您单击它时，它会切换一个类.sidebar-collapsed，它将应用属性来隐藏该栏。此外，按钮会向右移动以保持可见。

http://jsfiddle.net/xpp5sgg8/2/

CSS

.sidebar, .toggle {
    transition:all .5s ease-in-out;
    -webkit-transition:all .5s ease-in-out;
}

.sidebar {
    background:lightgrey;
    width:200px;
    height:100vh;
    position:absolute;
    top:0;
    left:0;
}

.toggle {
    position:absolute;
    right:5px;
    top:5px;
    width:30px;
    height:30px;
    background:black;
}

.sidebar-collapsed {
     transform:translateX(-100%);   
    -webkit-transform:translateX(-100%);
}

.sidebar-collapsed .toggle {
    right:-5px;
     transform:translateX(100%);   
    -webkit-transform:translateX(100%);   
}

【讨论】：

很好，但你没有使用引导程序。如果有人使用我发布的代码并根据所需的结果进行更改，那就太好了。

【解决方案2】：

只需在导航栏标题 div 中移动按钮，如下所示：

<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>

然后，在你的 css 中：

.navbar-header {
    position: relative;
}

.navbar-toggle {
    position: absolute;  // this takes the button out of the regular document flow 
    left: 100%;    // this will stick the button on the outside right edge -- reduce this if you want the button more inside of the navbar-header
    top: 50%;
    transform: translateY(-50%);  // this & the rule above it will center the button vertically relative to the navbar-header
}

【讨论】：

这是一个带有您已有标记的示例。 jsfiddle.net/9dmLdtLq/2