hola comunidad estoy haciendo un menu vertical y para ello utilizo jquery y en especifico la funcion toggle para expandir y recoger lo elementos del menu, este es mi html
Código:
<ul id="treeMenu">
<li class="main" id="TamilNadu">categoria
<ul>
<li class="submain">subcategoria1
<ul>
<li id="base.especialidades" >
<a href='personas.php'>elemento1</a>
</li>
<li id="base.departamento" >
<a href='personas2.php'>elemento2</a>
</li>
<li>
<a href='personas3.php'>elemento3</a>
</li>
</ul>
</li>
<li class="submain">subcategoria
<ul>
<li>elemento1</li>
<li>elemento2</li>
<li>elemento3</li>
</ul>
</li>
</ul>
</li>
<li class="main" id="TamilNadu">categoria2
<ul>
<li>subcategoria</li>
</ul>
</li>
</ul>
este es mi codigo javascript para el menu
Código:
(document).ready(function() {
//Class 'contentContainer' refers to 'li' that has child with it.
//By default the child ul of 'contentContainer' will be set to 'display:none'
$("#treeMenu li").toggle(
function()
{ // START FIRST CLICK FUNCTION
if ($(this).hasClass('submain'))
{
$(this).children('ul').slideDown()
$(this).removeClass('submain').addClass('contentViewing');
}
if (($(this).hasClass('main') || $(this).hasClass('contentViewingMain'))&& $('.contentViewingMain').text() != $(this).text())
{
$('.contentViewingMain').children('ul').slideUp()
$('.contentViewingMain').removeClass().addClass('main');
}
if ($(this).hasClass('main'))
{
$(this).children('ul').slideDown()
$(this).removeClass('main').addClass('contentViewingMain');
}
else if ($(this).hasClass('contentViewingMain'))
{
$(this).children('ul').slideUp()
$(this).removeClass('contentViewingMain').addClass('main');
}
}, // END FIRST CLICK FUNCTION
function()
{ // START SECOND CLICK FUNCTION
if (($(this).hasClass('main') || $(this).hasClass('contentViewingMain')) && $('.contentViewingMain').text() != $(this).text())
{
$('.contentViewingMain').children('ul').slideUp()
$('.contentViewingMain').removeClass().addClass('main');
}
if ($(this).hasClass('contentViewing'))
{
$(this).children('ul').slideUp()
$(this).removeClass('contentViewing').addClass('submain');
}
if ($(this).hasClass('main'))
{
$(this).children('ul').slideDown()
$(this).removeClass('main').addClass('contentViewingMain');
}
else if ($(this).hasClass('contentViewingMain'))
{
$(this).children('ul').slideUp()
$(this).removeClass('contentViewingMain').addClass('main');
}
} // END SECOND CLICK FUNCTIOn
); // END TOGGLE FUNCTION
}); // END DOCUMENT READY
ahora mi problema esta en que cuando hago click sobre los link que tengo puesto no va a ningun lugar es como si la funcion toggle estuviera interfiriendo en el click, alguien pudiera decirme como resolver esto
agradecere cualquier ayuda
saludos manuelle