javascript - 我希望侧边栏首先显示，然后单击按钮并使用 Bootstrap 将下拉列表添加到菜单项的侧面后折叠

Question

我想要使用 bootstrap 的侧栏菜单。

即使在大屏幕中，我也想通过单击按钮来隐藏菜单。

折叠到左侧时，菜单图标应显示在左侧。

通过单击侧面的下拉菜单，在菜单项内。

请告诉我解决方案。

我尝试使用css和bootstrap和jquery。它不起作用。

#wrapper {
  padding-left: 250px;
  transition: all 0.4s ease 0s;
}

#sidebar-wrapper {
  margin-left: -250px;
  top: 51px;
  left: 250px;
  width: 250px;
  background: #000;
  position: fixed;
  height: 100%;
  overflow-y: auto;
  z-index: 1000;
  transition: all 0.4s ease 0s;
}

#wrapper.active {
  padding-left: 0;
}

#wrapper.active #sidebar-wrapper {
  left: 0;
}

#page-content-wrapper {
  width: 100%;
  padding-top: 70px;
  transition: all 0.4s ease 0s;
}

.sidebar-nav {
  position: absolute;
  top: 0;
  width: 250px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.sidebar-nav li {
  line-height: 40px;
  text-indent: 20px;
}

.sidebar-nav li a {
  color: #999999;
  display: block;
  text-decoration: none;
  padding-left: 60px;
}

.sidebar-nav li a span:before {
  position: absolute;
  left: 0;
  color: #41484c;
  text-align: center;
  width: 20px;
  line-height: 18px;
}

.sidebar-nav li a:hover,
.sidebar-nav li.active {
  color: #fff;
  background: rgba(255,255,255,0.2);
  text-decoration: none;
}

.sidebar-nav li a:active,
.sidebar-nav li a:focus {
  text-decoration: none;
}

.sidebar-nav > .sidebar-brand {
  height: 65px;
  line-height: 60px;
  font-size: 18px;
}

.sidebar-nav > .sidebar-brand a {
  color: #999999;
}

.sidebar-nav > .sidebar-brand a:hover {
  color: #fff;
  background: none;
}

#menu-toggle {
  text-decoration: none;
  float: left;
  color: #fff;
  padding-right: 15px;
}

@media (max-width:767px) {
  #wrapper {
    padding-left: 0;
  }

  #sidebar-wrapper {
    left: 0;
  }

  #wrapper.active {
    position: relative;
    left: 250px;
  }

  #wrapper.active #sidebar-wrapper {
    left: 250px;
    width: 250px;
    transition: all 0.4s ease 0s;
  }

  #menu-toggle {
    display: inline-block;
  }
}

<div id="wrapper">
  <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
          aria-expanded="false" aria-controls="navbar">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <div class="navbar-brand">
          <a id="menu-toggle" href="#" class="glyphicon glyphicon-align-justify btn-menu toggle">
            <i class="fa fa-bars"></i>
          </a>
          <a href="#">Project name</a>
        </div>
      </div>
      <div id="navbar" class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#about">About</a></li>
        </ul>
      </div>
      <!--/.nav-collapse -->
    </div>
  </nav>
  <!-- Sidebar -->
  <div id="sidebar-wrapper">
    <nav id="spy">
      <ul class="sidebar-nav nav">
        <li class="sidebar-brand">
          <a href="#home"><span class="fa fa-home solo">Home</span></a>
        </li>
        <li>
          <a href="#anch1">
            <span class="fa fa-anchor solo">Anchor 1</span>
          </a>
        </li>
        <li>
          <a href="#anch2">
            <span class="fa fa-anchor solo">Anchor 2</span>
          </a>
        </li>
        <li>
          <a href="#anch3">
            <span class="fa fa-anchor solo">Anchor 3</span>
          </a>
        </li>
        <li>
          <a href="#anch4">
            <span class="fa fa-anchor solo">Anchor 4</span>
          </a>
        </li>
      </ul>
    </nav>
  </div>
  <!-- Page content -->
  <div id="page-content-wrapper">
    <div class="page-content">
      <div class="container-fluid">
        <div class="row">
          <div class="col-md-6">
            <div class="panel panel-danger">
              <div class="panel-heading">
                Panel 1
              </div>
              <div class="panel-body">
                content body
              </div>
            </div>
          </div>
          <div class="col-md-6">
            <div class="panel panel-success">
              <div class="panel-heading">
                Panel 1
              </div>
              <div class="panel-body">
                content body
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

我添加了一些 jquery 代码并更改了您的代码块。其余代码相同。

另外，不要忘记在代码中添加 jquery、font-awesome 和 bootstrap cdn。 (如下面的代码片段所示)

<div  class="navbar-brand">
    <a id="menu-toggle" href="#" class=" btn-menu toggle">
        <i class="fa fa-bars"></i>
    </a>
    <a href="#">Project name</a>
</div>

$(document).ready(function () {
  $("a#menu-toggle").click(function (){
    $("#wrapper").toggleClass("active");
  });
});

#wrapper {
  padding-left: 250px;
  transition: all 0.4s ease 0s;
}

#sidebar-wrapper {
  margin-left: -250px;
  top: 51px;
  left: 250px;
  width: 250px;
  background: #000;
  position: fixed;
  height: 100%;
  overflow-y: auto;
  z-index: 1000;
  transition: all 0.4s ease 0s;
}

#wrapper.active {
  padding-left: 0;
}

#wrapper.active #sidebar-wrapper {
  left: 0;
}

#page-content-wrapper {
  width: 100%;
  padding-top: 70px;
  transition: all 0.4s ease 0s;
}

.sidebar-nav {
  position: absolute;
  top: 0;
  width: 250px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.sidebar-nav li {
  line-height: 40px;
  text-indent: 20px;
}

.sidebar-nav li a {
  color: #999999;
  display: block;
  text-decoration: none;
  padding-left: 60px;
}

.sidebar-nav li a span:before {
  position: absolute;
  left: 0;
  color: #41484c;
  text-align: center;
  width: 20px;
  line-height: 18px;
}

.sidebar-nav li a:hover,
.sidebar-nav li.active {
  color: #fff;
  background: rgba(255,255,255,0.2);
  text-decoration: none;
}

.sidebar-nav li a:active,
.sidebar-nav li a:focus {
  text-decoration: none;
}

.sidebar-nav > .sidebar-brand {
  height: 65px;
  line-height: 60px;
  font-size: 18px;
}

.sidebar-nav > .sidebar-brand a {
  color: #999999;
}

.sidebar-nav > .sidebar-brand a:hover {
  color: #fff;
  background: none;
}

#menu-toggle {
    text-decoration: none;
    float: left;
    color: #fff;
    padding-right: 15px;
}

@media (max-width:767px) {

#wrapper {
  padding-left: 0;
}

#sidebar-wrapper {
  left: 0;
}

#wrapper.active {
  position: relative;
  left: 250px;
}

#wrapper.active #sidebar-wrapper {
  left: 250px;
  width: 250px;
  transition: all 0.4s ease 0s;
}

#menu-toggle {
  display: inline-block;
}

}
.dropdown,.sidebar-nav,#id,#sidebar-wrapper{
  overflow:visible;
}
.dropdown>.dropdown-menu{
  position:absolute;
  top:0;
  left:100%;
  z-index:100;
  background-color:black;
  margin:0;
  padding:0;
  border:none;
  border-radius:0;
}
.dropdown>.dropdown-menu>li>a{
  line-height:45px;
  color:white;
  background-color:black;
}
.dropdown>.dropdown-menu>li>a:hover{
  background: rgba(255,255,255,0.2);
  color:white;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="wrapper">
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
		<div class="container-fluid">
			<div class="navbar-header">
    			
                <div  class="navbar-brand">
                    <a id="menu-toggle" href="#" class=" btn-menu toggle">
                        <i class="fa fa-bars"></i>
                    </a>
    				<a href="#">Project name</a>
                </div>
			</div>
			<div id="navbar" class="collapse navbar-collapse">
				<ul class="nav navbar-nav">
					<li class="active"><a href="#">Home</a></li>
					<li><a href="#about">About</a></li>
				</ul>
			</div><!--/.nav-collapse -->
		</div>
	</nav>
    <!-- Sidebar -->
    <div id="sidebar-wrapper">
        <nav id="spy">
            <ul class="sidebar-nav nav">
                <li class="sidebar-brand">
                    <a href="#home"><span class="fa fa-home solo">Home</span></a>
                </li>
                <li>
                    <a href="#anch1">
                        <span class="fa fa-anchor solo">Anchor 1</span>
                    </a>
                </li>
                <li class="dropdown">
                  <a href="#anch2" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="fa fa-anchor solo">Anchor 2</span><span class="caret"></span></a>
                  
                    <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
          </ul>
        </li>
                <li>
                    <a href="#anch3">
                        <span class="fa fa-anchor solo">Anchor 3</span>
                    </a>
                </li>
                <li>
                    <a href="#anch4">
                        <span class="fa fa-anchor solo">Anchor 4</span>
                    </a>
                </li>
            </ul>
        </nav>
    </div>
    <!-- Page content -->
    <div id="page-content-wrapper">
        <div class="page-content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-6">
                        <div class="panel panel-danger">
                            <div class="panel-heading">
                                    Panel 1
                            </div>
                            <div class="panel-body">
                                content body
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">                    
                        <div class="panel panel-success">
                            <div class="panel-heading">
                                    Panel 1
                            </div>
                            <div class="panel-body">
                                content body
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>