Помогите. Я никак не могу понять как тут вставить развёртывание в зависимости от текущей страницы
<script type="text/javascript">
$(document).ready(function () {
$('.sub > a').click(function(){
$('.sub ul').slideUp();
if ($(this).next().is(":visible")){
$(this).next().slideUp();
} else {
$(this).next().slideToggle();
}
return false;
});
$('.mini-menu > ul > li > a').click(function(){
$('.mini-menu > ul > li > a, .sub a').removeClass('active');
$(this).addClass('active');
}),
$('.sub ul li a').click(function(){
$('.sub ul li a').removeClass('active');
$(this).addClass('active');
});
});
</script>
<div class="mini-menu">
<ul>
<li>
<a href="#">Главная</a>
</li>
<li class="sub">
<a href="#">Пункт Меню - 1</a>
<ul>
<li><a href="#">Ссылка - 1</a></li>
<li><a href="#">Ссылка - 2</a></li>
<li><a href="#">Ссылка - 3</a></li>
<li><a href="#">Ссылка - 4</a></li>
<li><a href="#">Ссылка - 5</a></li>
<li><a href="#">Ссылка - 6</a></li>
<li><a href="#">Ссылка - 7</a></li>
<li><a href="#">Ссылка - 8</a></li>
</ul>
</li>
<li class="sub">
<a href="#">Пункт Меню - 2</a>
<ul>
<li><a href="#">Ссылка - 1</a></li>
<li><a href="#">Ссылка - 2</a></li>
<li><a href="#">Ссылка - 3</a></li>
<li><a href="#">Ссылка - 4</a></li>
<li><a href="#">Ссылка - 5</a></li>
<li><a href="#">Ссылка - 6</a></li>
<li><a href="#">Ссылка - 7</a></li>
<li><a href="#">Ссылка - 8</a></li>
<li><a href="#">Ссылка - 9</a></li>
</ul>
</li>
<li class="sub">
<a href="#">Пункт Меню - 3</a>
<ul>
<li><a href="#">Ссылка - 1</a></li>
<li><a href="#">Ссылка - 2</a></li>
<li><a href="#">Ссылка - 3</a></li>
<li><a href="#">Ссылка - 4</a></li>
<li><a href="#">Ссылка - 5</a></li>
</ul>
</li>
<li>
<a href="#">Контакты</a>
</li>
</ul>
</div>
<style>
.mini-menu {
margin: 0px auto;
max-width: 220px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
border: 1px solid rgba(0, 0, 0, 0.7);
-webkit-box-shadow:0 0 8px rgba(0, 0, 0, 0.4);
-moz-box-shadow:0 0 8px rgba(0, 0, 0, 0.4);
box-shadow:0 0 8px rgba(0, 0, 0, 0.4);
overflow: hidden;
font: normal 14px Helvetica, Arial, sans-serif;
}
.mini-menu ul {
list-style: none;
margin: 0;
padding:0;
text-align:left;
}
.mini-menu > ul > li {
position: relative;
}
.mini-menu > ul > li > a {
display: block;
outline: 0;
padding: .7em 1em;
text-decoration: none;
color:#C9C9C9;
font-weight: normal;
text-shadow: 1px 1px 3px #111;
background: #333;
border-bottom: 1px solid #222;
background-image:-webkit-linear-gradient(#444, #333);
background-image:-moz-linear-gradient(#444, #333);
background-image:-ms-linear-gradient(#444, #333);
background-image:linear-gradient(#444, #333);
-webkit-box-shadow:inset 0 1px 0 0 rgba(250,250,250,0.1);
-moz-box-shadow:inset 0 1px 0 0 rgba(250,250,250,0.1);
box-shadow:inset 0 1px 0 0 rgba(250,250,250,0.1);
}
.mini-menu > ul > li > a:hover,
.mini-menu > ul > li > a.active {
color:#f2bd00;
}
.mini-menu .sub > ul {
display: none;
overflow: hidden;
background: #eee;
-webkit-box-shadow:inset 0 0 50px #bbb;
-moz-box-shadow:inset 0 0 50px #bbb;
box-shadow:inset 0 0 50px #bbb;
}
.mini-menu .sub > ul > li > a {
color:#514b92;
display: block;
font-size: 12px;
text-decoration: none;
padding: .7em 1em;
border-bottom: 1px dotted #bababa;
}
.mini-menu .sub > ul > li > a:hover,
.mini-menu .sub > ul > li > a.active {
background: #d8d8d8;
color: red;
padding-left: 1.3em;
}
.mini-menu .sub > ul > li > a:after{
content: "»";
float: left;
margin-right:6px;
line-height: 12px;
}
.mini-menu .sub > a:before {
content:'•';
height:12px;
width:12px;
font-size: 1em;
display:inline-block;
position: absolute;
right: 10px;
top: 12px;
background: #333;
line-height: .8em;
color: red;
text-indent: 0;
text-align: center;
text-shadow:none;
font-weight: 500;
-webkit-border-radius:50%;
-moz-border-radius:50%;
border-radius:50%;
-webkit-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15);
-moz-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15);
box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15);
}
/* активный переключатель */
.mini-menu .sub > a.active:before{
color: #f2bd00;
}
</style>