Помогите пожалуйста со скриптом.
Есть меню
<div id="sidebar">
<ul>
<li><a href=#>Категория</a></li>
<li><a href=#>Категория</a></li>
<li class=submenu><a href=#>Категория</a></li> <!--Если категория имеет подкатегорию, присваиваем класс submenu-->
<li class=submenu><a href=#>Категория</a>
<ul class=cat>
<li><a href=#>ПодКатегория</a></li>
<li><a href=#>ПодКатегория</a></li>
<li><a href=#>ПодКатегория</a></li>
</ul>
</li>
<li><a href=#>Ссылка</a></li>
</ul>
</div>
Категории и подкатегории. Мне нужно, что бы при загрузке страницы подкатегории были скрыты.
В css сделал так
#sidebar .submenu .cat
{
display:none;
},
А при клике на любую категорию имеющую подкатегорию нужно развернуть скрытый список.
в jquery сделал так
$(function () {
$('#sidebar ul .submenu').click(function()
{
var cl=$(this).find('ul').attr("class");
//console.log(cl);
if (cl=="cat")
{
$(this).find('.cat').slideDown('fast').removeClass ('cat').addClass('uncat');
}
else
{
$(this).find('.uncat').slideUp('fast').removeClass ('uncat').addClass('cut');
console.log(cl);
}
return false;
});
Проблема в том, что это скрипт отрабатывает правильно только два раза, когда открываю и когда закрываю подкатегорию.
Как ни странно, переменная cl получает каждый раз измененный класс, но почему то я все равно попадаю в условие else.
Посоветуйте, что я делаю не так?