Вертикальное меню - аккордеон. Проблема.

[notgosu]

Доброго времени суток, ув. форумчане!
Заранее скажу, что с js я еще на "Вы", поэтому вопросы могут показаться глупыми.
Суть вопроса следующая. Есть меню в виде списка:

<ul class="dropdown dropdown-horizontal" id="yw1">
<li class="first"><a href="/">Каталог</a></li>
<li class=" dir"><a href="/about">О нас</a>
<ul>
<li class="first"><a href="/about/news">Новости</a></li>
<li><a href="/about/articles">Статьи</a></li>
<li class="last"><a href="/about/contact">Контакты</a></li>
</ul>
</li>
<li class=" dir"><a href="/cooperation">Сотрудничество</a>
<ul>
<li class="first"><a href="/cooperation/optovim">Оптовым клиентам</a></li>
<li><a href="/cooperation/supliers">Поставщикам</a></li>
<li><a href="/cooperation/proizvoditeli">Производители</a></li>
<li class="last"><a href="/cooperation/partners">Наши партнеры</a></li>
</ul>
</li>
<li class=" dir"><a href="/howtobuy">Как купить</a>
<ul>
<li class="first"><a href="/howtobuy/payment">Оплата</a></li>
<li><a href="/howtobuy/delivery">Доставка</a></li>
<li class="last"><a href="/howtobuy/refund">Возврат и обмен</a></li>
</ul>
</li>
<li class="last dir"><a href="/service">Cервис</a>
<ul>
<li class="first"><a href="/service/install">Установка</a></li>
<li><a href="/service/warranty">Гарантийное обслуживание</a></li>
<li class="last"><a href="/service/maintenance">Информация по уходу</a></li>
</ul>
</li>
</ul>

Как видно, элементы меню, имеющие вложенность имеют класс "dir". Задача - при клике на такие элементы сворачивать/разворачивать вложенную часть, но при этом не переходить по ссылке пункта меню.
Пробую с помощью JQuery cледующее:

$(document).ready(function() {
                                $("ul.dropdown li.dir a").click(function(){
                                    $(this).parent().find("li").slideToggle("slow");
                                    
                                });
                                });

При клике на элемент меню, вложенные элементы пытаются свернуться, но происходит переход по ссылке. Ссылки есть у каждого элемента и, к сожалению, их заменить на # нельзя.
Пробовал в скрипт после slideToggle("slow"); добавить:

return false;

При этом вложенное меню сворачивается/разворачивается но перейти по ссылкам вложенных элементов невозможно.

Подскажите, будь-те так добры, что добавить, чтобы можно было оперировать вложенными ссылками?
Заранее спасибо за ответы!

[NikolasGrad]

Нужно добавить >

$(function () {
  $("ul.dropdown li.dir > a").click(function(){
    $(this).next("ul").slideToggle("slow");
    return false;
  });
});

[notgosu]

$(function () {
  $("ul.dropdown li.dir > a").click(function(){
    $(this).next("ul").slideToggle("slow");
    return false;
  });
});

Все получилось! Большое спасибо! +

[notgosu]

Копаюсь дальше.
1)Нужно, чтобы при открытии страницы, все вложенные меню были свернутыми. Вроде бы сделал, но появилась проблема:
при клике по пункту меню, который имеет внутри себя еще вложенные меню, сначала раскрываются все вложенные меню(буквально за долю секунды), а потом сразу сворачиваются. Т.е. проявляется неприятный глазу баг.
Пример тут:
http://jsfiddle.net/UCkRv/
Кликаем по "Сантехника" и все вложенные меню на долю секунды раскрываются, а потом сворачиваются обратно.

2) Сразу же в догонку хочу поинтересоваться как сохранять положение скрытых/развернутых элементов при переходе на другие страницы. Про jquery.cookies читал, но не совсем понял - что именно будем заносить в куки? Текущие CSS для свернутых/развернутых блоков?

За любую помощь заранее благодарен!

[yurik417]

Вот раздвигающееся меню на jQuery точно с такой структурой как вам надо http://masscode.ru/index.php/k2/item/51-liharmonica

[Deff]

хочу поинтересоваться как сохранять положение скрытых/развернутых элементов при переходе на другие страницы.

Вот есть решение похоэей задачки Проблема с автоскрытием элементов навигации