在 `sidebar-nav` 中创建下拉菜单

Question

请看下面的代码

<div id="main-sidebar-wrapper" style="margin-top:50px; width:150px;">
    <ul class="sidebar-nav" style="margin-top:10px;">
    <!--  <li> <a href="#"> Face Sheet</a> </li> -->
      <li class="li_active"> <a href="Srvlt">History</a> </li>
      <li> <a href="Srvlt">Problems</a> </li>
      <li> <a href="Srvlt">Medications</a> </li>
     <!-- <li> <a href="#">Immunizations</a> </li> -->
      <li  >  <a href="Srvlt">Allergies</a> </li>
      <li> <a href="Srvlt">Vitals</a> </li>
      <li> <a href="Srvlt">Examinations</a> </li>
      <li  > <a href="Srvlt">Counseling</a> </li>
      <li> <a href="Srvlt">Demographics</a> </li>
      <hr>
      <li>Documents Upload
          <ul class="sub-menu">
              <li><a href="Srvlt">E.C.G</a></li>
          </ul>
      </li> 
    <!--  <li> <a href="#">Documents</a> </li> -->
    </ul>
  </div>

在这里，Documents Upload 部分，我希望它是一个下拉菜单或下拉菜单。我该怎么做？

Answer 1

@media (min-width: 768px) {
  .navbar-collapse {
    height: auto;
    border-top: 0;
    box-shadow: none;
    max-height: none;
    padding-left:0;
    padding-right:0;
  }
  .navbar-collapse.collapse {
    display: block !important;
    width: auto !important;
    padding-bottom: 0;
    overflow: visible !important;
  }
  .navbar-collapse.in {
    overflow-x: visible;
  }

.navbar
{
	max-width:300px;
	margin-right: 0;
	margin-left: 0;
}	

.navbar-nav,
.navbar-nav > li,
.navbar-left,
.navbar-right,
.navbar-header
{float:none !important;}

.navbar-right .dropdown-menu {left:0;right:auto;}
.navbar-collapse .navbar-nav.navbar-right:last-child {
    margin-right: 0;
}
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- Jquery CDN -->
<script src="https://code.jquery.com/jquery-2.1.2.min.js"></script>

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>


<nav class="navbar navbar-default" 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="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="#">Brand</a>
  </div>

  <!-- Collect the nav links, forms, and other content for toggling -->
  <div class="collapse navbar-collapse navbar-ex1-collapse">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></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>
          <li><a href="#">Separated link</a></li>
          <li><a href="#">One more separated link</a></li>
        </ul>
      </li>
    </ul>
    <form class="navbar-form navbar-left" role="search">
      <div class="form-group">
        <input type="text" class="form-control" placeholder="Search">
      </div>
      <button type="submit" class="btn btn-default">Submit</button>
    </form>
  </div><!-- /.navbar-collapse -->
</nav>

Answer 2

请查找更新后的fiddle。

需要做一些改变

<li>Documents Upload <ul class="sub-menu"> <li><a href="Srvlt">E.C.G</a></li> </ul> </li>

我进行了必要的更改。请通过链接。

Answer 3

这类似于下拉菜单在移动设备上的工作方式，可能会有所帮助。

body,
html {
  height: 100%;
}
.sidebar-fixed {
  padding: 5px 18px;
  position: fixed;
  width: 175px;
  height: 100%;
  top: 0;
  left: 0;
  background: #f5f5f5;
}
.sidebar-fixed #drop-one {
  list-style: none;
  text-align: left;
}
.sidebar-fixed #drop-one > li {
  padding-top: 10px;
  font-size: 13px;
}
.sidebar-fixed #drop-one > li >a {
  color: #555;
  text-decoration: none;
}
ul.sidebar-list {
  list-style: none;
  display: inline;
  text-align: left;
}
ul.sidebar-list > li {
  font-size: 18px;
  padding-bottom: 25px;
}
ul.sidebar-list > li > a {
  color: #555;
  text-decoration: none;
}
.main-content {
  margin-left: 175px;
  padding-top: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="sidebar-fixed" id="sideNavParent">
  <ul class="sidebar-list">
    <li> <a href="#"> Sidebar</a>

    </li>
    <li> <a href="#"> Something</a>

    </li>
    <li> <a href="#nope" data-toggle="collapse" data-target="#drop-one"> Something <span class="caret"></span></a>

      <ul id="drop-one" class="collapse" data-parent="#sideNavParent">
        <li> <a href="#"> Something</a>

        </li>
        <li> <a href="#"> Something</a>

        </li>
        <li> <a href="#"> Something</a>

        </li>
        <li> <a href="#"> Something</a>

        </li>
      </ul>
    </li>
  </ul>
</div>
<div class="main-content">
  <div class="container-fluid">
    <div class="alert alert-info">Main Content</div>
  </div>
</div>