我已经使用CSS和jquery创建了一个菜单。当我单击图标时，它将在底部显示项目渲染，然后项目将显示在右侧。
但是我想改变这种行为。我想更改菜单项在过渡时显示在右侧的方式。
HTML代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Collapsible sidebar using Bootstrap 3</title>
<!-- Bootstrap CSS CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Our Custom CSS -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<!-- Sidebar Holder -->
<nav id="sidebar" class="active">
<div class="sidebar-header">
<button type="button" class="sidebarCollapse btn btn-primary navbar-btn">
<div></div>
<div></div>
<div></div>
</button>
</div>
<ul class="list-unstyled components">
<li>
<a data-target="#Stammdaten" data-toggle="collapse" aria-expanded="false">
<div>
<i class="stammdaten-icon"></i>
</div>
<div class="collapse" id="Stammdaten">
<h4>Stammdaten</h4>
<p>Kunden</p>
<p>Lieferanten</p>
<p>Artikel</p>
</div>
</a>
</li>
<li>
<a data-target="#Auf" data-toggle="collapse" aria-expanded="false">
<div>
<i class="glyphicon glyphicon-list-alt"></i>
</div>
<div class="collapse" id="Auf">
<h4>Aufträge</h4>
<p>Artikel suchen</p>
<p>Lieferanten suchen</p>
<p>Mappe öffnen</p>
</div>
</a>
</li>
<li>
<a data-target="#Statistik" data-toggle="collapse" aria-expanded="false">
<div>
<i class="glyphicon glyphicon-stats"></i>
</div>
<div class="collapse" id="Statistik">
<h4>Statistik</h4>
<p>Statistik anlegen</p>
<p>Auswertung</p>
<p>Zeitraum festlegen</p>
<p>Auswertung</p>
<p>Mappe öffnen</p>
</div>
</a>
</li>
<li>
<a data-target="#Einstellungen" data-toggle="collapse" aria-expanded="false">
<div>
<i class="einstellungen-icon"></i>
</div>
<div class="collapse" id="Einstellungen">
<h4>Einstellungen</h4>
<p>Artikel suchen</p>
<p>Lieferanten suchen</p>
<p>Mappe öffnen</p>
</div>
</a>
</li>
</ul>
<div class="sidebar-footer">
<button type="button" class="sidebarCollapse btn btn-primary navbar-btn">
<i class="glyphicon glyphicon-menu-left"></i>
<i class="glyphicon glyphicon-menu-right"></i>
</button>
</div>
</nav>
<!-- Page Content Holder -->
<div id="content">
</div>
</div>
<!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<!-- Bootstrap Js CDN -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.sidebarCollapse').on('click', function () {
if ($('#sidebar').hasClass('active')) {
$('.collapse').collapse('show');
$('li').addClass('active');
} else {
$('li').removeClass('active');
$('.collapse.in').collapse('hide');
}
$('#sidebar').toggleClass('active');
});
$('[data-toggle="collapse"]').click(function() {
if ($('#sidebar').hasClass('active')) {
$('#sidebar').toggleClass('active');
}
if ($('li').hasClass('active')) {
$('li').removeClass('active');
}
$('.collapse.in').collapse('hide');
});
});
</script>
</body>
</html>
CSS代码
@import "https://fonts.googleapis.com/css?family=Roboto:300,400,500,600,700";
body {
font-family: 'Roboto', sans-serif;
background: #fafafa;
}
p {
font-family: 'Roboto', sans-serif;
font-size: 1.1em;
font-weight: 300;
line-height: 1.7em;
color: #999;
}
a, a:hover, a:focus {
color: inherit;
text-decoration: none;
transition: all 0.3s;
}
.navbar {
padding: 15px 10px;
background: #fff;
border: none;
border-radius: 0;
margin-bottom: 40px;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}
.navbar-btn {
box-shadow: none;
outline: none !important;
border: none;
background-color: #007AAC;
margin: 0;
height: 80px;
width: 80px;
border-radius: 0;
}
.navbar-btn div {
width: 26px;
height: 4px;
background-color: white;
margin: 6px auto;
}
.line {
width: 100%;
height: 1px;
border-bottom: 1px dashed #ddd;
margin: 40px 0;
}
i, span {
display: inline-block;
}
/* ---------------------------------------------------
SIDEBAR STYLE
----------------------------------------------------- */
.wrapper {
display: flex;
align-items: stretch;
}
#sidebar {
min-width: 290px;
max-width: 290px;
background: #144667;
color: #fff;
transition: all 0.3s;
padding-bottom: 80px;
position: relative;
}
#sidebar .sidebar-footer {
position: absolute;
bottom: 0;
right: 0;
left: 0;
background: #007AAC;
text-align: right;
}
#sidebar .sidebar-footer button {
font-size: 30px;
}
#sidebar .sidebar-footer button .glyphicon {
top: unset;
vertical-align: middle;
}
#sidebar .sidebar-footer button .glyphicon-menu-right {
display: none;
}
#sidebar.active .sidebar-footer button .glyphicon-menu-right {
display: block;
}
#sidebar.active .sidebar-footer button .glyphicon-menu-left {
display: none;
}
#sidebar.active {
min-width: 80px;
max-width: 80px;
text-align: center;
}
#sidebar ul li a {
text-align: left;
}
#sidebar.active ul li a {
padding: 20px 10px;
text-align: center;
font-size: 0.85em;
}
#sidebar.active ul li a div {
padding-left: 6px;
}
#sidebar.active ul li a div:nth-child(2) {
display: none;
}
#sidebar.active ul li a i {
margin-right: 0;
display: block;
font-size: 1.8em;
margin-bottom: 5px;
}
#sidebar.active ul li a i.glyphicon {
font-size: 2.6em;
text-align: left;
margin-top: 5px;
}
#sidebar.active a[aria-expanded="false"]::before, #sidebar.active a[aria-expanded="true"]::before {
top: auto;
bottom: 5px;
right: 50%;
-webkit-transform: translateX(50%);
-ms-transform: translateX(50%);
transform: translateX(50%);
}
#sidebar .sidebar-header {
background: #144667;
}
#sidebar .sidebar-header strong {
display: none;
font-size: 1.8em;
}
#sidebar ul li a {
padding: 30px 12px;
font-size: 1.1em;
display: block;
}
#sidebar ul li a div {
vertical-align: middle;
padding-left: 28px;
}
#sidebar ul li a div:first-child {
display: inline-block;
}
#sidebar.active ul li a div.collapse.in {
display: none;
}
#sidebar ul li a div.collapse.in {
display: inline-block;
}
#sidebar ul li a:hover {
color: #7386D5;
background: #fff;
}
#sidebar ul li a i {
width: 40px;
height: 40px;
font-size: 2.2em;
}
#sidebar ul li.active > a, a[aria-expanded="true"] {
color: #fff;
}
#sidebar ul li > a[aria-expanded="true"] {
border-left: 6px solid #E5911A;
background: #113B58;
}
#sidebar ul li.active > a[aria-expanded="true"] {
border-left: 0;
}
#sidebar ul li a:hover {
background: #113B58;
color: white;
}
.stammdaten-icon {
background: url(./icons/Stammdaten.png) no-repeat;
}
.einstellungen-icon {
background: url(./icons/Einstellungen.png) no-repeat;
}
ul ul a {
font-size: 0.9em !important;
padding-left: 30px !important;
background: #6d7fcc;
}
/* ---------------------------------------------------
CONTENT STYLE
----------------------------------------------------- */
#content {
padding: 20px;
min-height: 100vh;
transition: all 3s;
}
/* ---------------------------------------------------
MEDIAQUERIES
----------------------------------------------------- */
@media (max-width: 768px) {
#sidebar.active {
margin-left: 0 !important;
}
#sidebar .sidebar-header h3 {
display: none;
}
#sidebar ul li a {
padding: 20px 10px;
}
#sidebar ul li a span {
font-size: 0.85em;
}
#sidebar ul li a i {
margin-right: 0;
display: block;
}
#sidebar ul li a i {
font-size: 1.3em;
}
#sidebar {
margin-left: 0;
}
}
这是一支工作笔
答案 0 :(得分：1)
更改CSS
#sidebar ul li a {
padding: 30px 12px;
font-size: 1.1em;
display: flex;
align-items:center;
}