js添加菜單欄以後停留在那裏

先附上效果圖：

這種是用Jq作的，由於我前臺用的是<ul>和<li>，因此不能純粹作成是ajax的效果。

如下是我作的頁面介紹：

<div class="sidebar">
<ul class="sidebar-menu">
<li><a href="javascript:;"><i class="glyphicon glyphicon-home"></i>&nbsp;&nbsp;首<span style="visibility:hidden;">佔位</span>頁</a></li>
<li><a href="javascript:;"><i class="glyphicon glyphicon-user"></i>&nbsp;&nbsp;個人客戶</a></li>
<li><a href="javascript:;"><i class="glyphicon glyphicon-road"></i>&nbsp;&nbsp;運輸線路</a></li>
<li><a href="javascript:;"><i class="glyphicon glyphicon-file"></i>&nbsp;&nbsp;客戶下單</a></li>
<li class="treeview">
<a href="javascript:;">
<i class="glyphicon glyphicon-th-list" ></i>&nbsp;&nbsp;訂單管理
<i class="glyphicon glyphicon-chevron-right pull-right"></i>
</a>
<ul class="treeview-menu">
<li class="unhandle"><a href="javascript:;"><i class="glyphicon glyphicon-triangle-right"></i>&nbsp;待處理訂單</a></li>
<li class="receive"><a href="javascript:;"><i class="glyphicon glyphicon-triangle-right"></i>&nbsp;已接收訂單</a></li>
<li class="refuse"><a href="javascript:;"><i class="glyphicon glyphicon-triangle-right"></i>&nbsp;已拒絕訂單</a></li>
<li class="sended"><a href="javascript:;"><i class="glyphicon glyphicon-triangle-right"></i>&nbsp;已發送訂單</a></li>
<li class="finish"><a href="javascript:;"><i class="glyphicon glyphicon-triangle-right"></i>&nbsp;已成功訂單</a></li>
<li class="all"><a href="javascript:;"><i class="glyphicon glyphicon-triangle-right"></i>&nbsp;所有訂單</a></li>
</ul>
</li>
<li class="treeview">
<a href="javascript:;">
<i class="glyphicon glyphicon-align-justify"></i>&nbsp;&nbsp;庫存管理
<i class="glyphicon glyphicon-chevron-right pull-right"></i>
</a>
<ul class="treeview-menu">
<li class="godownEntry"><a href="javascript:;"><i class="glyphicon glyphicon-triangle-right"></i>&nbsp;入庫單</a></li>
<li class="godownSearch"><a href="javascript:;"><i class="glyphicon glyphicon-triangle-right"></i>&nbsp;庫存查詢</a></li>
</ul>
</li>
<li class="treeview">
<a href="javascript:;">
<i class="glyphicon glyphicon-calendar"></i>&nbsp;&nbsp;彙總管理
<i class="glyphicon glyphicon-chevron-right pull-right"></i>
</a>
<ul class="treeview-menu">
<li class="day"><a href="javascript:;"><i class="glyphicon glyphicon-triangle-right"></i>&nbsp;日訂單彙總</a></li>
<li class="month"><a href="javascript:;"><i class="glyphicon glyphicon-triangle-right"></i>&nbsp;月訂單彙總</a></li>
<li class="day"><a href="javascript:;"><i class="glyphicon glyphicon-triangle-right"></i>&nbsp;線路訂單日報表</a></li>
<li class="day"><a href="javascript:;"><i class="glyphicon glyphicon-triangle-right"></i>&nbsp;供應商對帳單</a></li>
</ul>
</li>
</ul>
</div>

 css樣式：

/*左側菜單*/

.sidebar{
position: fixed;
top: 50px;
left: 0;
width: 145px;
height:100%;
background-color:#e7ecf0;
border-right: 1px solid #c0c7d9;
z-index: 101;
}
.sidebar-menu {
background-color:#e7ecf0;
}
.sidebar-menu > li {
position: relative;
}
.sidebar-menu > li > a {
padding: 12px 5px 12px 15px;
display: block;
border-left: 3px solid transparent;
border-bottom:1px solid #dfe5ea;
color:#3160b2;
}
.sidebar-menu .icon {
padding-right:5px;
width: 20px;
}
.sidebar-menu > li:hover > a, .sidebar-menu > li.active > a {
background:#dfe5ea;
border-left-color: #f73526;
border-bottom:1px solid #dfe5ea;
}
.sidebar-menu > li > .treeview-menu {
background: #eceff4;
}
.sidebar-menu > li > a > .icon-angle-right {
width: auto;
height: auto;
padding: 0;
margin-right: 10px;
margin-top: 3px;
}
.sidebar-menu > li.active > a > .icon-angle-right {
transform: rotate(90deg);
}
.sidebar-menu > li.active > .treeview-menu {
display: block;
}
.sidebar-menu a {
color: #b8c7ce;
text-decoration: none;
}
.sidebar-menu .treeview-menu {
display: none;
list-style: none;
padding: 0;
margin: 0;
padding-left: 5px;
}
.sidebar-menu .treeview-menu .treeview-menu {
padding-left: 20px;
}
.sidebar-menu .treeview-menu > li {
margin: 0;
}
.sidebar-menu .treeview-menu > li > a {
padding: 5px 5px 5px 15px;
display: block;
font-size: 14px;
color: #4261a4;
}
.sidebar-menu .treeview-menu > li > a > .icon {
width: 20px;
}
.sidebar-menu .treeview-menu > li > a > .icon-angle-right,
.sidebar-menu .treeview-menu > li > a > .icon-angle-down {
width: auto;
}
.sidebar-menu .treeview-menu > li.active > a, .sidebar-menu .treeview-menu > li > a:hover {
color: #fff;
background-color: #205aa4;
}
.hoverClass{
background-color: #205aa4;
}

 

Jquery:

//左側菜單

$(document).ready(function () {
$('.treeview-menu li a').each(function () {
if ($($(this))[0].href == String(window.location)) {
$(this).parent().parent().parent().addClass('active');
$(this).addClass('hoverClass');
$(this).css("color", "#fff");
}
});
})

 

$.sidebarMenu = function (menu) {
var animationSpeed = 300;

 

$(menu).on('click', 'li a', function (e) {
var $this = $(this);
var checkElement = $this.next();

 

if (checkElement.is('.treeview-menu') && checkElement.is(':visible')) {
//展開狀態
checkElement.slideUp(animationSpeed);
checkElement.parent("li").removeClass("active");

 

}

 

else if ((checkElement.is('.treeview-menu')) && (!checkElement.is(':visible'))) { //收縮狀態
var parent = $this.parents('ul').first();
var ul = parent.find('ul:visible').slideUp(animationSpeed); //先收縮全部的ul
var parent_li = $this.parent("li");
checkElement.slideDown(animationSpeed, function () {
parent.find('li.active').removeClass('active');
parent_li.addClass('active');
});
}
if (checkElement.is('.treeview-menu')) {
e.preventDefault();
}
});
}

 

這樣效果就能夠出來了~~~