Предполагается выпадение аккордеона со стандартной формой:
<ul>
<li>
<a href="#">Main Element</a>
<ul>
<li>
<a href="#">Dropdown Element</a>
</li>
</ul>
</li>
</ul>
Я использую jQuery для расширения при щелчке ссылки родительского элемента:
var $j = jQuery.noConflict();
function initMenus() {
$j('ul.menu ul').hide();
$j.each($j('ul.menu'), function(){
$j('#' + this.id + '.expandfirst ul:first').show();
});
$j('ul.menu li a').click(
function() {
var checkElement = $j(this).next();
var parent = this.parentNode.parentNode.id;
if($j('#' + parent).hasClass('noaccordion')) {
$j(this).next().slideToggle('normal');
return false;
}
if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
if($j('#' + parent).hasClass('collapsible')) {
$j('#' + parent + ' ul:visible').slideUp('normal');
}
return false;
}
if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$j('#' + parent + ' ul:visible').slideUp('normal');
checkElement.slideDown('normal');
return false;
}
}
);
}
$j(document).ready(function() {initMenus();});
Чтобы добавить класс к главному элементу при щелчке (иначе класс включается при каждом раскрытии раскрывающегося списка) Я пытаюсь использовать .toggleClass (className) без удачи, скорее всего, с моим позиционированием. Где я могу добавить этот элемент, чтобы получить желаемый эффект?