Я использую скрипт jQuery для создания меню аккордеона. Он отлично работает, если родительский элемент не имеет гиперссылки, и при нажатии на него пользователь переходит к гиперссылке, а не к расширению меню для отображения дочерних элементов. Любые идеи, как исправить код ниже, чтобы решить эту проблему?Аккордеонное меню родительского элемента переходит к гиперссылке вместо расширения
JQuery скрипт:
$(document).ready(function() {
$('.menu li').each(function() {
if($(this).children('ul').length > 0) {
$(this).addClass('parent');
}
});
$('.menu li.parent > a').click(function() {
$(this).parent().toggleClass('active');
$(this).parent().children('ul').slideToggle('fast');
});
$('#all').click(function() {
$('.menu li').each(function() {
$(this).toggleClass('active');
$(this).children('ul').slideToggle('fast');
});
});
});
HTML разметка:
<div class="menu">
<ul>
<li><a href="http://www.google.com">Menu item 1</a>
<ul>
<li><a>Menu item 1.1</a></li>
<li><a>Menu item 1.2</a>
<ul>
<li><a>Menu item 1.2.1</a></li>
<li><a>Menu item 1.2.2</a></li>
<li><a>Menu item 1.2.3</a></li>
</ul>
</li>
<li><a>Menu item 1.3</a></li>
</ul>
</li>
</ul>
</div>
CSS:
a
{
cursor: pointer;
}
.menu ul
{
list-style: none outside none;
}
.menu li a
{
line-height: 25px;
}
.menu > ul > li > a
{
color: #3B4C56;
display: block;
font-weight: normal;
position: relative;
text-decoration: none;
}
.menu li.parent > a
{
padding: 0 0 0 28px;
}
.menu li.parent > a:before
{
background-image: url("../images/plus_minus_icons.png");
background-position: 25px center;
content: "";
display: block;
height: 21px;
left: 0;
position: absolute;
top: 2px;
vertical-align: middle;
width: 23px;
}
.menu ul li.active > a:before
{
background-position: 0 center;
}
.menu ul li ul
{
border-left: 1px solid #D9DADB;
display: none;
margin: 0 0 0 12px;
overflow: hidden;
padding: 0 0 0 25px;
}
.menu ul li ul li
{
position: relative;
}
.menu ul li ul li:before
{
border-bottom: 1px dashed #E2E2E3;
content: "";
left: -20px;
position: absolute;
top: 12px;
width: 15px;
}