Здравствуйте. Установил на сайт меню-аккордеон на Jquery.
В итоге ссылки на одиночные элементы работают (переход по клику есть), а вот ссылки на вложенные (выпадающие элементы) - не работают. При наведении на такие ссылки урл виден, но по клику перехода нет. Будто бы клики блокируются скриптом.
Сам скрипт:
<script type="text/javascript">
$(document).ready(function () {
$('#cssmenu li.has-sub > a').on('click', function(){
$(this).removeAttr('href');
var element = $(this).parent('li');
if (element.hasClass('open')) {
element.removeClass('open');
element.find('li').removeClass('open');
element.find('ul').slideUp();
}
else {
element.addClass('open');
element.children('ul').slideDown();
element.siblings('li').children('ul').slideUp();
element.siblings('li').removeClass('open');
element.siblings('li').find('li').removeClass('open');
element.siblings('li').find('ul').slideUp();
}
});
$('#cssmenu>ul>li.has-sub>a').append('<span class="holder"></span>');
});
</script>
Код:
<!DOCTYPE>
<html>
<head>
<title>Вертикальное accordion меню</title>
<link rel="shortcut icon" href="/favicon.ico" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
<style>
.demo_container{
margin:100px auto;
width:300px;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$('#cssmenu li.has-sub > a').on('click', function(){
$(this).removeAttr('href');
var element = $(this).parent('li');
if (element.hasClass('open')) {
element.removeClass('open');
element.find('li').removeClass('open');
element.find('ul').slideUp();
}
else {
element.addClass('open');
element.children('ul').slideDown();
element.siblings('li').children('ul').slideUp();
element.siblings('li').removeClass('open');
element.siblings('li').find('li').removeClass('open');
element.siblings('li').find('ul').slideUp();
}
});
$('#cssmenu>ul>li.has-sub>a').append('<span class="holder"></span>');
});
</script>
</head>
<body>
<div class="demo_container">
<div id='cssmenu'>
<ul>
<li class='active'><a href='index.html'><span>Главная</span></a></li>
<li class='has-sub'><a href='#'><span>Каталог</span></a>
<ul>
<li class='has-sub'><a href='#'><span>Смартфоны</span></a>
<ul>
<li><a href='#'><span>Samsung</span></a></li>
<li><a href='#'><span>Sony</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>Планшеты</span></a>
<ul>
<li><a href='#'><span>Asus</span></a></li>
<li><a href='#'><span>Lenovo</span></a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#'><span>О магазине</span></a></li>
<li><a href='#'><span>Контакты</span></a></li>
</ul>
</div>
</div>
</body>
</html>
Кто подскажет, где цобакен зарыт?
