Ihr JSFiddle enthält einen Fehler bezüglich Ihrer toggle = !toggle
. Warum nicht einfach die $('#elementId').toggle()
verwenden? Es ist JQuery, und es vereinfacht diesen Code massiv. Siehe here für mein JSFiddle und unten für meinen Code.
HTML:
<nav class="sidebar-nav">
<header class="logo">
<a href="#" class="sidebar-icon"> <span class="fa fa-bars"></span> </a>
<span id="logo">NAV</span>
</header>
<ul id="nav" class="nav">
<li><a href="#"><i class="fa fa-home"></i>Home</a></li>
<li><a href="#" id="btn-1" data-toggle="collapse" data-target="#submenu1" aria-expanded="false"><i class="fa fa-user"></i>Profile<i class="expandNav fa fa-plus-square"></i></a>
<ul class="nav collapse" id="submenu1" role="menu" aria-labelledby="btn-1">
<li><a href="#">profile.1</a></li>
<li><a href="#">profile.2</a></li>
<li><a href="#">profile.3</a></li>
</ul>
<li><a href="#" id="btn-1" data-toggle="collapse" data-target="#submenu2" aria-expanded="false"><i class="fa fa-envelope"></i>About<i class="expandNav fa fa-plus-square"></i></a>
<ul class="nav collapse" id="submenu2" role="menu" aria-labelledby="btn-1">
<li><a href="#">About.1</a></li>
<li><a href="#">About.2</a></li>
<li><a href="#">About.3</a></li>
</ul>
</li>
<li><a href="#"><i class="fa fa-history"></i>Blog</a></li>
<li><a href="#" id="btn-1" data-toggle="collapse" data-target="#submenu3" aria-expanded="false"><i class="fa fa-share-alt"></i>Deals<i class="expandNav fa fa-plus-square"></i></a>
<ul class="nav collapse" id="submenu3" role="menu" aria-labelledby="btn-1">
<li><a href="#">Deals.1</a></li>
<li><a href="#">Deals.2</a></li>
<li><a href="#">Deals.3</a></li>
</ul>
</li>
</ul>
</nav>
CSS (habe ich eine Menge von diesem aus dem ursprünglichen Fiddle):
html,
body {
font-family: 'Lato', sans-serif;
height: 100%;
background: #ecf0f1;
}
a {
color: #008DE7;
font-style: italic;
font-weight: 700;
}
.expandNav {
float: right;
padding-top: 4px;
}
.content {
min-width: 1260px;
position: relative;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
margin: 0px auto;
}
.content.sidebar-collapsed {
padding-right: 65px;
transition: all 100ms linear;
transition-delay: 300ms;
}
.content.sidebar-collapsed-back {
padding-right: 280px;
transition: all 100ms linear;
}
.content.sidebar-collapsed .sidebar-nav {
width: 65px;
transition: all 100ms ease-in-out;
transition-delay: 300ms;
}
.content.sidebar-collapsed-back .sidebar-nav {
width: 280px;
transition: all 100ms ease-in-out;
}
.content.sidebar-collapsed .logo {
padding: 26px;
box-sizing: border-box;
transition: all 100ms ease-in-out;
transition-delay: 300ms;
}
.content.sidebar-collapsed-back .logo {
width: 100%;
padding: 21px;
height: 136px;
box-sizing: border-box;
transition: all 100ms ease-in-out;
}
.content.sidebar-collapsed #logo {
opacity: 0;
transition: all 200ms ease-in-out;
}
.content.sidebar-collapsed-back #logo {
opacity: 1;
transition: all 200ms ease-in-out;
transition-delay: 300ms;
}
.content.sidebar-collapsed #nav span {
opacity: 0;
transition: all 50ms linear;
}
.content.sidebar-collapsed-back #nav span {
opacity: 1;
transition: all 200ms linear;
}
.sidebar-nav {
position: fixed;
float: left;
width: 250px;
top: 0;
right: 0;
bottom: 0;
background-color: #e74c3c;
color: #aaabae;
font-family: "Lato";
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
z-index: 1;
}
#nav {
list-style: none;
margin: 0;
padding: 0;
margin-bottom: 20px;
}
#nav li {
position: relative;
margin: 0;
font-size: 15px;
border-bottom: 1px solid #fff;
padding: 0;
}
#nav li a {
font-style: normal;
font-weight: 400;
position: relative;
display: block;
padding: 16px 25px;
color: #fff;
white-space: nowrap;
z-index: 2;
text-decoration: none
}
#nav li a:hover {
color: #c0392b;
background-color: #ecf0f1;
}
#nav ul li {
background-color: #2b303a;
}
#nav li:first-child {
border-top: 1px solid #fff;
}
#nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#nav .fa {
margin: 0px 17px 0px 0px;
}
.logo {
width: 100%;
padding: 21px;
margin-bottom: 20px;
box-sizing: border-box;
}
#logo {
color: #fff;
font-size: 30px;
font-style: normal;
}
.sidebar-icon {
position: relative;
float: right;
text-align: center;
line-height: 1;
font-size: 25px;
padding: 6px 8px;
color: #fff;
}
und JS (Dies war nur die Symbole wechseln):
$('#nav a').click(function() {
$(this).find('i.expandNav').toggleClass('fa-plus-square fa-minus-square');
});
Es ist ein „$ ('was auch immer). Hin- und herzuschalten() Funktion in Jquery, nicht wahr? – Julo0sS
Ihre Geige funktioniert nicht. Es gibt Fehler, wenn Sie die Konsole sehen –
Syntaxfehler + Fehler enthalten ($ ist nicht definiert ... und fehlende ")" am Ende Ihres Codes ...) – Julo0sS