Tying in .addClass() with other functions?
- by Anders H
Assuming an accordion dropdown with the standard form of:
<ul>
<li>
<a href="#">Main Element</a>
<ul>
<li>
<a href="#">Dropdown Element</a>
</li>
</ul>
</li>
</ul>
I'm using jQuery to expand when the parent element link is clicked:
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();});
To add a class to the Main Element when clicked (aka the class is enabled anytime the dropdown is expanded) I'm trying to use .toggleClass(className) without luck, most likely to my positioning. Where can I add this element to get the desired effect?
