html - 折叠时可滚动的引导侧边栏

Question

我正在使用 bootstrap 3，并且有以下侧边栏:

        <div class="sidebar-profile" style="padding-bottom: 0px;">
           <a href="Default.aspx" style="word-wrap: break-word;">
              <i class="fa fa-fw fa-arrow-left"></i><b>Home</b>
           </a>
           <hr>
        </div>

        <nav>
            <ul class="nav nav-pills nav-stacked">

                <li class="active"><a href="#" onclick="SelectSection('');" style="white-space: nowrap;text-overflow: ellipsis;overflow:hidden;"><i class="fa fa-fw fa fa-align-justify"></i>All Sections</a></li><li><a href="#" onclick="SelectSection('PersonalDetails');" style="white-space: nowrap;text-overflow: ellipsis;overflow:hidden;"><i class="fa fa-fw fa-file-text"></i>Personal Details</a></li><li><a href="#" onclick="SelectSection('PersonalDetails');" style="white-space: nowrap;text-overflow: ellipsis;overflow:hidden;"><i class="fa fa-fw fa-file-text"></i>Personal Details</a></li><li><a href="#" onclick="SelectSection('IdentificationDocument');" style="white-space: nowrap;text-overflow: ellipsis;overflow:hidden;"><i class="fa fa-fw fa-file-text"></i>Identification Document</a></li><li><a href="#" onclick="SelectSection('IdentificationDocument');" style="white-space: nowrap;text-overflow: ellipsis;overflow:hidden;"><i class="fa fa-fw fa-file-text"></i>Identification Document</a></li><li><a href="#" onclick="SelectSection('SegmentClass');" style="white-space: nowrap;text-overflow: ellipsis;overflow:hidden;"><i class="fa fa-fw fa-file-text"></i>Segment Class</a></li><li><a href="#" onclick="SelectSection('SegmentClass');" style="white-space: nowrap;text-overflow: ellipsis;overflow:hidden;"><i class="fa fa-fw fa-file-text"></i>Segment Class</a></li><li><a href="#" onclick="SelectSection('EmploymentDetails');" style="white-space: nowrap;text-overflow: ellipsis;overflow:hidden;"><i class="fa fa-fw fa-file-text"></i>Employment Details</a></li><li><a href="#" onclick="SelectSection('EmploymentDetails');" style="white-space: nowrap;text-overflow: ellipsis;overflow:hidden;"><i class="fa fa-fw fa-file-text"></i>Employment Details</a></li><li><a href="#" onclick="SelectSection('ContactDetails');" style="white-space: nowrap;text-overflow: ellipsis;overflow:hidden;"><i class="fa fa-fw fa-file-text"></i>Contact Details</a></li><li><a href="#" onclick="SelectSection('ContactDetails');" style="white-space: nowrap;text-overflow: ellipsis;overflow:hidden;"><i class="fa fa-fw fa-file-text"></i>Contact Details</a></li><li><a href="#" onclick="SelectSection('ExpectedTurnover');" style="white-space: nowrap;text-overflow: ellipsis;overflow:hidden;"><i class="fa fa-fw fa-file-text"></i>Expected Turnover / Month</a></li><li><a href="#" onclick="SelectSection('ExpectedTurnover');" style="white-space: nowrap;text-overflow: ellipsis;overflow:hidden;"><i class="fa fa-fw fa-file-text"></i>Expected Turnover / Month</a></li><li><a href="#" onclick="SelectSection('CRS');" style="white-space: nowrap;text-overflow: ellipsis;overflow:hidden;"><i class="fa fa-fw fa-file-text"></i>CRS</a></li><li><a href="#" onclick="SelectSection('CRS');" style="white-space: nowrap;text-overflow: ellipsis;overflow:hidden;"><i class="fa fa-fw fa-file-text"></i>CRS</a></li><li><a href="#" onclick="SelectSection('ResidenceAddress');" style="white-space: nowrap;text-overflow: ellipsis;overflow:hidden;"><i class="fa fa-fw fa-file-text"></i>Residence Address</a></li><li><a href="#" onclick="SelectSection('ResidenceAddress');" style="white-space: nowrap;text-overflow: ellipsis;overflow:hidden;"><i class="fa fa-fw fa-file-text"></i>Residence Address</a></li><li><a href="#" onclick="SelectSection('MailingAddress');" style="white-space: nowrap;text-overflow: ellipsis;overflow:hidden;"><i class="fa fa-fw fa-file-text"></i>Mailing Address</a></li><li><a href="#" onclick="SelectSection('MailingAddress');" style="white-space: nowrap;text-overflow: ellipsis;overflow:hidden;"><i class="fa fa-fw fa-file-text"></i>Mailing Address</a></li><li><a href="#" onclick="SelectSection('WorkAddress');" style="white-space: nowrap;text-overflow: ellipsis;overflow:hidden;"><i class="fa fa-fw fa-file-text"></i>Work Address</a></li><li><a href="#" onclick="SelectSection('WorkAddress');" style="white-space: nowrap;text-overflow: ellipsis;overflow:hidden;"><i class="fa fa-fw fa-file-text"></i>Work Address</a></li><li><a href="#" onclick="SelectSection('HomeCountryAddress');" style="white-space: nowrap;text-overflow: ellipsis;overflow:hidden;"><i class="fa fa-fw fa-file-text"></i>Home Country Address</a></li><li><a href="#" onclick="SelectSection('HomeCountryAddress');" style="white-space: nowrap;text-overflow: ellipsis;overflow:hidden;"><i class="fa fa-fw fa-file-text"></i>Home Country Address</a></li><li><a href="#" onclick="SelectSection('Fatca');" style="white-space: nowrap;text-overflow: ellipsis;overflow:hidden;"><i class="fa fa-fw fa-file-text"></i>FATCA</a></li><li><a href="#" onclick="SelectSection('Fatca');" style="white-space: nowrap;text-overflow: ellipsis;overflow:hidden;"><i class="fa fa-fw fa-file-text"></i>FATCA</a></li><li><a href="#" onclick="SelectSection('Services');" style="white-space: nowrap;text-overflow: ellipsis;overflow:hidden;"><i class="fa fa-fw fa-file-text"></i>Services</a></li><li><a href="#" onclick="SelectSection('Services');" style="white-space: nowrap;text-overflow: ellipsis;overflow:hidden;"><i class="fa fa-fw fa-file-text"></i>Services</a></li><li><a href="#" onclick="SelectSection('CIFProfile');" style="white-space: nowrap;text-overflow: ellipsis;overflow:hidden;"><i class="fa fa-fw fa-file-text"></i>CIF Profile</a></li><li><a href="#" onclick="SelectSection('CIFProfile');" style="white-space: nowrap;text-overflow: ellipsis;overflow:hidden;"><i class="fa fa-fw fa-file-text"></i>CIF Profile</a></li>
            </ul>
        </nav>

侧边栏不可滚动，当我折叠侧边栏时，我可以看到鼠标悬停时弹出的菜单项:

侧边菜单:不折叠，没有滚动条:

侧边菜单:折叠，鼠标悬停在一个菜单项上:

我的问题是，当向菜单添加滚动条时，该项目将在父菜单内弹出，而不是在菜单外弹出。

添加滚动条后的代码:

        <div class="sidebar-profile" style="padding-bottom: 0px;">
           <a href="Default.aspx" style="word-wrap: break-word;">
              <i class="fa fa-fw fa-arrow-left"></i><b>Home</b>
           </a>
           <hr>
        </div>

        <nav>
            <ul class="nav nav-pills nav-stacked" style="height: auto;max-height: 500px;overflow-x: hidden;">

                <li class="active"><a href="#" onclick="SelectSection('');" style="white-space: nowrap;text-overflow: ellipsis;overflow:hidden;"><i class="fa fa-fw fa fa-align-justify"></i>All Sections</a></li><li><a href="#" onclick="SelectSection('PersonalDetails');" style="white-space: nowrap;text-overflow: ellipsis;overflow:hidden;"><i class="fa fa-fw fa-file-text"></i>Personal Details</a></li><li><a href="#" onclick="SelectSection('PersonalDetails');" style="white-space: nowrap;text-overflow: ellipsis;overflow:hidden;"><i class="fa fa-fw fa-file-text"></i>Personal Details</a></li><li><a href="#" onclick="SelectSection('IdentificationDocument');" style="white-space: nowrap;text-overflow: ellipsis;overflow:hidden;"><i class="fa fa-fw fa-file-text"></i>Identification Document</a></li><li><a href="#" onclick="SelectSection('IdentificationDocument');" style="white-space: nowrap;text-overflow: ellipsis;overflow:hidden;"><i class="fa fa-fw fa-file-text"></i>Identification Document</a></li><li><a href="#" onclick="SelectSection('SegmentClass');" style="white-space: nowrap;text-overflow: ellipsis;overflow:hidden;"><i class="fa fa-fw fa-file-text"></i>Segment Class</a></li><li><a href="#" onclick="SelectSection('SegmentClass');" style="white-space: nowrap;text-overflow: ellipsis;overflow:hidden;"><i class="fa fa-fw fa-file-text"></i>Segment Class</a></li><li><a href="#" onclick="SelectSection('EmploymentDetails');" style="white-space: nowrap;text-overflow: ellipsis;overflow:hidden;"><i class="fa fa-fw fa-file-text"></i>Employment Details</a></li><li><a href="#" onclick="SelectSection('EmploymentDetails');" style="white-space: nowrap;text-overflow: ellipsis;overflow:hidden;"><i class="fa fa-fw fa-file-text"></i>Employment Details</a></li><li><a href="#" onclick="SelectSection('ContactDetails');" style="white-space: nowrap;text-overflow: ellipsis;overflow:hidden;"><i class="fa fa-fw fa-file-text"></i>Contact Details</a></li><li><a href="#" onclick="SelectSection('ContactDetails');" style="white-space: nowrap;text-overflow: ellipsis;overflow:hidden;"><i class="fa fa-fw fa-file-text"></i>Contact Details</a></li><li><a href="#" onclick="SelectSection('ExpectedTurnover');" style="white-space: nowrap;text-overflow: ellipsis;overflow:hidden;"><i class="fa fa-fw fa-file-text"></i>Expected Turnover / Month</a></li><li><a href="#" onclick="SelectSection('ExpectedTurnover');" style="white-space: nowrap;text-overflow: ellipsis;overflow:hidden;"><i class="fa fa-fw fa-file-text"></i>Expected Turnover / Month</a></li><li><a href="#" onclick="SelectSection('CRS');" style="white-space: nowrap;text-overflow: ellipsis;overflow:hidden;"><i class="fa fa-fw fa-file-text"></i>CRS</a></li><li><a href="#" onclick="SelectSection('CRS');" style="white-space: nowrap;text-overflow: ellipsis;overflow:hidden;"><i class="fa fa-fw fa-file-text"></i>CRS</a></li><li><a href="#" onclick="SelectSection('ResidenceAddress');" style="white-space: nowrap;text-overflow: ellipsis;overflow:hidden;"><i class="fa fa-fw fa-file-text"></i>Residence Address</a></li><li><a href="#" onclick="SelectSection('ResidenceAddress');" style="white-space: nowrap;text-overflow: ellipsis;overflow:hidden;"><i class="fa fa-fw fa-file-text"></i>Residence Address</a></li><li><a href="#" onclick="SelectSection('MailingAddress');" style="white-space: nowrap;text-overflow: ellipsis;overflow:hidden;"><i class="fa fa-fw fa-file-text"></i>Mailing Address</a></li><li><a href="#" onclick="SelectSection('MailingAddress');" style="white-space: nowrap;text-overflow: ellipsis;overflow:hidden;"><i class="fa fa-fw fa-file-text"></i>Mailing Address</a></li><li><a href="#" onclick="SelectSection('WorkAddress');" style="white-space: nowrap;text-overflow: ellipsis;overflow:hidden;"><i class="fa fa-fw fa-file-text"></i>Work Address</a></li><li><a href="#" onclick="SelectSection('WorkAddress');" style="white-space: nowrap;text-overflow: ellipsis;overflow:hidden;"><i class="fa fa-fw fa-file-text"></i>Work Address</a></li><li><a href="#" onclick="SelectSection('HomeCountryAddress');" style="white-space: nowrap;text-overflow: ellipsis;overflow:hidden;"><i class="fa fa-fw fa-file-text"></i>Home Country Address</a></li><li><a href="#" onclick="SelectSection('HomeCountryAddress');" style="white-space: nowrap;text-overflow: ellipsis;overflow:hidden;"><i class="fa fa-fw fa-file-text"></i>Home Country Address</a></li><li><a href="#" onclick="SelectSection('Fatca');" style="white-space: nowrap;text-overflow: ellipsis;overflow:hidden;"><i class="fa fa-fw fa-file-text"></i>FATCA</a></li><li><a href="#" onclick="SelectSection('Fatca');" style="white-space: nowrap;text-overflow: ellipsis;overflow:hidden;"><i class="fa fa-fw fa-file-text"></i>FATCA</a></li><li><a href="#" onclick="SelectSection('Services');" style="white-space: nowrap;text-overflow: ellipsis;overflow:hidden;"><i class="fa fa-fw fa-file-text"></i>Services</a></li><li><a href="#" onclick="SelectSection('Services');" style="white-space: nowrap;text-overflow: ellipsis;overflow:hidden;"><i class="fa fa-fw fa-file-text"></i>Services</a></li><li><a href="#" onclick="SelectSection('CIFProfile');" style="white-space: nowrap;text-overflow: ellipsis;overflow:hidden;"><i class="fa fa-fw fa-file-text"></i>CIF Profile</a></li><li><a href="#" onclick="SelectSection('CIFProfile');" style="white-space: nowrap;text-overflow: ellipsis;overflow:hidden;"><i class="fa fa-fw fa-file-text"></i>CIF Profile</a></li>

            </ul>
        </nav>

请查看以下解决问题的图片:

侧面菜单:用滚动条折叠:

侧边菜单:折叠，鼠标悬停在一个菜单项上，但该项目不会在菜单边框外弹出:

Answer 1

检查下面的代码片段以获得可能的解决方案。

使用

.navBar {
  height: auto;
  max-height: 500px;
  overflow-x: hidden;
}

$(document).ready(function() {

	$("#menu-toggle").click(function(e) {
		e.preventDefault();
		var elem = document.getElementById("sidebar-wrapper");
		left = window.getComputedStyle(elem,null).getPropertyValue("left");
		if(left == "200px"){
			document.getElementsByClassName("sidebar-toggle")[0].style.left="-200px";
		}
		else if(left == "-200px"){
			document.getElementsByClassName("sidebar-toggle")[0].style.left="200px";
		}
	});
});

#sidebar-wrapper {
  top: 52px;
  left: -200px;
  width: 200px;
  background-color: #ddd;
  color: white;
  position: fixed;
  height: 100%;
  z-index: 1;
}
.sidebar-nav {
  position: absolute;
  top: 0;
  margin: 0;
  padding: 0;
  width: 250px;
  list-style: none;
}
.sidebar-nav li {
  text-indent: 20px;
  line-height: 50px;
}

.navBar {
  height: auto;
  max-height: 500px;
  overflow-x: hidden;
}
 .navBar li a {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow:hidden;
  background: #cecece;
}
.navbar-toggle:hover {
  text-decoration: none;
}

#sidebar-wrapper.sidebar-toggle {
  transition: all 0.3s ease-out;
  margin-left: -200px;
}
@media (min-width: 768px) {
  #sidebar-wrapper.sidebar-toggle {
    transition: 0s;
    left: 200px;
  }
}

<html>
<head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css" />

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>



</head>
<body>
<nav class="navbar navbar-default" role="navigation">
	<div class="container">
		<div class="navbar-header pull-left">
			<a id="menu-toggle" href="#" class="navbar-toggle">			     
           <i class="fa fa-angle-left" aria-hidden="true"></i> HOME
			</a> 
		</div>
		<div id="sidebar-wrapper" class="sidebar-toggle">

			<ul class="nav nav-pills nav-stacked navBar">
				<li class="active"><a href="#" onclick="SelectSection('');"><i class="fa fa-fw fa fa-align-justify"></i>All Sections</a></li>
				<li><a href="#" onclick="SelectSection('PersonalDetails');"><i class="fa fa-fw fa-file-text"></i>Personal Details</a></li>
				<li><a href="#" onclick="SelectSection('PersonalDetails');"><i class="fa fa-fw fa-file-text"></i>Personal Details</a></li>
				<li><a href="#" onclick="SelectSection('IdentificationDocument');"><i class="fa fa-fw fa-file-text"></i>Identification Document</a></li>
				<li><a href="#" onclick="SelectSection('IdentificationDocument');"><i class="fa fa-fw fa-file-text"></i>Identification Document</a></li>
				<li><a href="#" onclick="SelectSection('SegmentClass');"><i class="fa fa-fw fa-file-text"></i>Segment Class</a></li>
				<li><a href="#" onclick="SelectSection('SegmentClass');"><i class="fa fa-fw fa-file-text"></i>Segment Class</a></li>
				<li><a href="#" onclick="SelectSection('EmploymentDetails');"><i class="fa fa-fw fa-file-text"></i>Employment Details</a></li>
				<li><a href="#" onclick="SelectSection('EmploymentDetails');"><i class="fa fa-fw fa-file-text"></i>Employment Details</a></li>
				<li><a href="#" onclick="SelectSection('ContactDetails');"><i class="fa fa-fw fa-file-text"></i>Contact Details</a></li>
				<li><a href="#" onclick="SelectSection('ContactDetails');"><i class="fa fa-fw fa-file-text"></i>Contact Details</a></li>
				<li><a href="#" onclick="SelectSection('ExpectedTurnover');"><i class="fa fa-fw fa-file-text"></i>Expected Turnover / Month</a></li>
				<li><a href="#" onclick="SelectSection('ExpectedTurnover');"><i class="fa fa-fw fa-file-text"></i>Expected Turnover / Month</a></li>
				<li><a href="#" onclick="SelectSection('CRS');"><i class="fa fa-fw fa-file-text"></i>CRS</a></li>
				<li><a href="#" onclick="SelectSection('CRS');"><i class="fa fa-fw fa-file-text"></i>CRS</a></li>
				<li><a href="#" onclick="SelectSection('ResidenceAddress');"><i class="fa fa-fw fa-file-text"></i>Residence Address</a></li>
				<li><a href="#" onclick="SelectSection('ResidenceAddress');"><i class="fa fa-fw fa-file-text"></i>Residence Address</a></li>
				<li><a href="#" onclick="SelectSection('MailingAddress');"><i class="fa fa-fw fa-file-text"></i>Mailing Address</a></li>
				<li><a href="#" onclick="SelectSection('MailingAddress');"><i class="fa fa-fw fa-file-text"></i>Mailing Address</a></li>
				<li><a href="#" onclick="SelectSection('WorkAddress');"><i class="fa fa-fw fa-file-text"></i>Work Address</a></li>
				<li><a href="#" onclick="SelectSection('WorkAddress');"><i class="fa fa-fw fa-file-text"></i>Work Address</a></li>
				<li><a href="#" onclick="SelectSection('HomeCountryAddress');"><i class="fa fa-fw fa-file-text"></i>Home Country Address</a></li>
				<li><a href="#" onclick="SelectSection('HomeCountryAddress');"><i class="fa fa-fw fa-file-text"></i>Home Country Address</a></li>
				<li><a href="#" onclick="SelectSection('Fatca');"><i class="fa fa-fw fa-file-text"></i>FATCA</a></li>
				<li><a href="#" onclick="SelectSection('Fatca');"><i class="fa fa-fw fa-file-text"></i>FATCA</a></li>
				<li><a href="#" onclick="SelectSection('Services');"><i class="fa fa-fw fa-file-text"></i>Services</a></li>
				<li><a href="#" onclick="SelectSection('Services');"><i class="fa fa-fw fa-file-text"></i>Services</a></li>
				<li><a href="#" onclick="SelectSection('CIFProfile');"><i class="fa fa-fw fa-file-text"></i>CIF Profile</a></li>
				<li><a href="#" onclick="SelectSection('CIFProfile');"><i class="fa fa-fw fa-file-text"></i>CIF Profile</a></li>
			</ul>

		</div>
	</div>
</nav>
</body>
</html>